vue 从环境搭建到项目构建

1. 安装node

端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，按提示安装即可。

2. 安装淘宝npm镜像

由于npm是国外的，使用起来比较慢，用淘宝的cnpm镜像来安装vue。淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

npm install -g cnpm --registry=https://registry.npm.taobao.org 

3.安装全局vue-cli脚手架

cnpm install --global vue-cli

刚去看了一下Vue CLI 官网(https://cli.vuejs.org/zh/guide/installation.html)上版本已经到3.x，Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。目前用旧版的还是比较多。如果想使用3.x，命令为

npm install -g @vue/cli

4.创建一个新项目

在要创建vue项目的文件夹路径下输入命令

vue init webpack vue-demo

vue-demo是项目的名字

image.png

后面几个选择是问你需要哪些工具，vue-router是一定要使用的，其他是有关语法风格检测、单元测试之类的工具。

6.进入项目文件安装依赖

cnpm install

安装完之后项目文档里就多了一个node_modules文件夹

image.png

一般将项目文件分享给其他人时，不需要拷贝node_modules文件夹；拿到项目文件重新安装更不容易报错

5. 项目运行

cnpm run dev

image.png

浏览器访问地址默认为localhost:8080，在项目文件的config/index.js中可以修改

image.png

直接在浏览器输入localhost:8080就可以打开默认的模板了

image.png

6.项目构建

cnpm run build

使用生产环境配置构建项目，构建好的文件会输出到 "dist" 目录

image.png

1. npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器(本地打开也可以)，但发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。
   原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是 assetsPublicPath：' / ' 默认为根目录，而index.html和static是在同一级目录下，因此，解决方法就是 assetsPublicPath：' ./ ' 斜杠前加一个点，表示同一级。如图：

   
   image.png
   

   2.页面可以正常打开了，但是vue-router跳转路由页面无法显示
   解决方法：打开router/index.js看路由配置，添加mode这个配置即可，mode有两种模式，使用mode:'history'也可以

   
   image.png

index: 模板
assetRoot: 打包后文件要存放的路径
assetsSubDirectory: 除了 index.html 之外的静态资源要存放的路径，
assetsPublicPath: 代表打包后，index.html里面引用资源的的相对地址

• assetsSubDirectory 和 assetsPublicPath设置详解可参考
  https://juejin.im/post/5bd9838df265da393c06033a