Vue2.5 旅游项目实例27 联调测试上线-项目打包上线

vue

打开命令行，进入项目的目录，输入：

npm run build

这时候Vue的脚手架工具会自动对src下的源代码，进行打包编译，生成一个能被浏览器运行的代码，同时也是压缩过后的代码。

完成后，控制台会显示：

Build complete.

现在打开项目目录，会发现多出一个 dist 文件夹，这个文件夹里的代码就是我们最终要上线的代码。

然后我们需要把 dist 这个文件夹，发给后端的同学放在后端的服务器上。也就是说把 dist 目录下的 static 文件夹和 index.html 文件，拷贝放到后端项目的根目录下。

这时我们在浏览器打开 localhost 就可以访问了，这时访问的是后台服务器上，默认的80端口。

当你想把代码单独放到一个目录下的时候，比如：放在后端项目的根目录下的project目录下，直接运行 localhost/project 会报错，提示项目打包的文件路径引用产生了问题。

怎么解决呢？我们需要修改下代码。

打开项目下的config目录下的index.js文件：

往下翻，找到 build 区域，打包部分的配置项，修改：

build: {

。。。

assetsPublicPath: '/project',

修改完成后保存。

重新进行项目打包：

npm run build

打包完成后又会在项目下重新生成一个 dist 文件夹，然后我们把 dist 里的内容，拷贝到后端根目录下的 project 文件夹下就可以了。

现在在浏览器运行 localhost/project 就可以正常访问了。