vue cli3根据不同指令打包不同环境的包

cli2和cli3配置方式不同，本篇文章介绍的是cli3及3以上版本。输入vue -V可查看vue-cli版本，如下

步骤：

1.在根目录中添加.env.dev(测试环境)和.env.prod（生产环境）两个目录。

2. env.dev和.env.prod中的对应内容分别为如下:

NODE_ENV = 'development'
VUE_APP_TITLE = 'development'

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'

3. 在package.json中加入相应打包指令，如下：

 "prod": "vue-cli-service build --mode prod",
  "dev": "vue-cli-service build --mode dev",

 4.在配置url请求路径的文件进行配置

baseUrl=process.env.NODE_ENV == 'development' ? '//development.com/api' : '//production/api/'

5.执行对应打包指令即可，完成后更目录中将会生成dist文件(打包文件)

测试环境打包指令：npm run dev

生产环境打包指令：npm run prod

易踩到的坑:

问题一：打包后运行dist中的html文件后，报错Uncaught SyntaxError: Unexpected token <

原因：打包后生成的html中引入的文件路径错误

解决方式：检查生成的html中引入文件的路径，在vue.config.js中根据实际情况配置正确路径，然后再次打包。如下

 注意：不同版本路径配置项的字段名不同

vue-cli 2.x版本   assetsPublicPath: ' '

vue-cli 3.x版本   baseUrl : ' '

vue-cli 4.x及以上版本   publicPath: ' '

问题二：打包后运行dist中的html文件后，页面空白但不报错

原因：路由使用的history模式，history模式在本地是没有问题的，但是部署服务时，需要后端配合修改服务器配置，如果没有配置则无法正常使用history模式。

前端解决方式：在router.js中将history模式改为hash模式。

import { createRouter, createWebHashHistory } from 'vue-router'


const router = createRouter({
	history: createWebHashHistory(process.env.BASE_URL),
	routes
})