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

进行构建，打包出来的文件就是按照相对路径寻找的。