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'
上一篇下一篇

猜你喜欢

热点阅读