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#/