Vue项目 build构建

这时候项目已经完成，需要发布到网站上了。这时候就需要将此项目构建成需要发布的版本。命令：

npm run build

运行这句命令后，项目将会被构建到dist文件夹，文件夹有三个部分：

dist
├── index.html  
└── static
    ├── css
    │   ├── app.07f748db13e7a96b56e218ff0718169a.css
    │   └── app.07f748db13e7a96b56e218ff0718169a.css.map
    └── js
        ├── app.6668fbc8c675cfca24c4.js
        ├── app.6668fbc8c675cfca24c4.js.map
        ├── manifest.293ca43ed534df3c86e3.js
        ├── manifest.293ca43ed534df3c86e3.js.map
        ├── vendor.e46332c3c36ca7900295.js
        └── vendor.e46332c3c36ca7900295.js.map

• index.html 入口文件
• js/ js文件目录
• css/ css文件目录

这些打包好的文件都是经过压缩的。并且这些js文件和css文件都已经引入了index.html中，可以直接用于发布。但常常发布后会出错，页面显示空白，控制台错误信息为找不到文件。这个问题是由于发布的时候这些文件可能没有位于根目录，这时候就需要我们去设置。
首先看build/webpack.base.conf.js

构建的时候publicPath的配置为config.build.assetsPublicPath。而config从上级目录的config导入。而这个配置文件就是config文件夹下的index.js文件。

这个参数默认值为/，表示是根目录，如果想要改为相对目录，将其配置为./。这时候再运行npm run build进行构建，打包出来的文件就是按照相对路径寻找的。