ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue4.X 配置build打包不同环境不同域名的处理

2022-01-11 10:58:52  阅读:163  来源: 互联网

标签:VUE APP CURRENTMODE vue4 域名 production build 打包


1、package.json 里 修改 --mode 后面 是对应下面的 文件 buildtest 是执行 npm run buildtest

"scripts": {

"buildtest": "vue-cli-service build --mode test",

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

},

2、这时需要创建 2个文件,说明一下,NODE_ENV 要配置为'production' 因为保持和线上打包hash一样,否则打出的是 1.js 2.js.......VUE_APP_CURRENTMODE是自已定义变量 格式为VUE_APP_XXXX  定义这个是为了区分 什么环境 用什么域名去打包。

.env.test 代码为

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'

.env.prod 代码为

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'production'

3、可以全局配置域名的地方 正式和测试打包不同的域名。

let host = ''
if (process.env.VUE_APP_CURRENTMODE === 'production')  {
    host = 'www.XXXXX.com'
} else if (process.env.VUE_APP_CURRENTMODE === 'test') {
   host = 'test.XXXXX.com'
}

4、如果打包 不打css 那就要配置一下  vue.config.js 了

css: {
    extract: true  // 是否使用css分离插件 ExtractTextPlugin
  },

好了。配置完成 !!!

npm run build 正式打包

npm run buildtest 测试打包

标签:VUE,APP,CURRENTMODE,vue4,域名,production,build,打包
来源: https://blog.csdn.net/gftoso/article/details/122426077

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有