vue打包处理问题总结
2019-10-08 本文已影响0人
养猫的哈士奇_杨柳
1、更改打包地址
在vue项目的config目录下的index.js文件中,在build选项下
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
// 指定打包目录
// index.html文件的打包目录
// index: 'D:\\code\\web\\index.html',
//整个打包文件夹的打包目录
// assetsRoot: 'D:\\code\\web',
2、判断当前的环境(开发和生产环境),更换接口主路径
方法一:修改vue的配置文件,添加生产环境接口地址和开发环境接口地址,这样在本地开发和打包上线时,就会根据当前的环境自动选择该环境下的接口地址。
在vue项目的config目录下,修改dev.env.js文件
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
// 开发接口主路径
URL_BASE: '"/myBase"'
});
同时修改生产环境文件prod.env.js
module.exports = {
NODE_ENV: '"production"',
// 生产环境接口主路径
URL_BASE: '"/front"'
}
同时在接口引用时统一主路径,这样就可以根据当前环境自动选择主路径
const Base = process.env.URL_BASE;
方法二、直接判断当前环境选择不同的主路径,vue提供了nodejs的全局变量NODE_ENV,我们可以根据这个变量是否等于development来判断当前环境是否是开发环境,从而设置接口主路径
const BASE = process.env.NODE_ENV === 'development' ? '/myBase' : '/front'