美文网首页
vue打包处理问题总结

vue打包处理问题总结

作者: 养猫的哈士奇_杨柳 | 来源:发表于2019-10-08 17:31 被阅读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'
    

    相关文章

      网友评论

          本文标题:vue打包处理问题总结

          本文链接:https://www.haomeiwen.com/subject/vsxipctx.html