vue项目构建-打包-发布--简易demo

一、vue项目构建
首先电脑要安装node.js及npm
vue.js的官方文档给出的构建流程：

#全局安装 vue-cli
$ npm install --global vue-cli
#创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
#安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

 

二、vue项目的打包

#打包命令
$ npm run build

 

结果发现打包好后dist/index.html页面里的所有js,css,img等路径有问题都是指向根目录的。
此时需要修改config/index.js里的assetsPublicPath的字段，把初始项目里的根目录改为当前目录，然后在执行打包命令，这是dist/index.html页面就可以正常显示了

 - ./  当前目录
 - ../ 父级目录
 - /  根目录

 

三、发布
把dist文件里内容放到apache服务器上正常访问就可以了
---------------------
然后打开自己本地服务器地址就可以了
http://localhost:8080/dist/index.html#/