问答

vue2中打包时npm run build传递参数

作者:admin 2021-05-05 我要评论

我想通过给命令添加参数来改变一个变量的值 比如 const url = process.url==dev?'www.baidu.com':'www.sina.com' 请问需要怎么配置才能获取到对应的值 已解决 在...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

我想通过给命令添加参数来改变一个变量的值

image.png

比如
const url = process.url==dev?'www.baidu.com':'www.sina.com'
请问需要怎么配置才能获取到对应的值

已解决
在vue.config.js中打印process.argv可以得到传递的参数
然后从数组中取出传递的值设置给
process.env.VUE_APP_XXX (全局变量)
然后就可以在js文件中进行判断了
process.env.VUE_APP__XXX == 'aa'?'A':'B'
版本:vue-cli4

###

分三种方法种情况:
(1)如果是vue-cli2 可以在config文件夹里面设置。dev.env.js 是开发环境变量,prod.env.js是生产环境变量
可以在dev.env.js中配置

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://www.baidu.com"'
})

以及prod.env.js

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"http://www.sina.com"' //打包上线地址
}

然后在页面中就可以使用:

const baseUrl = process.env.NODE_ENV === 'development' ? process.env.BASE_API : process.env.API_ROOT

(2)对于vue-cl3或者vue-cli4脚手架,由于没有config文件夹,所有设置都在新建的vue.config.js文件中。
首先在根目录下新建两个文件
.env.development //开发环境
.env.production //生产环境
image.png
然后分别配置这两个文件
.env.development

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_BASE_URL = "http://www.baidu.com"

.env.production

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_URL = 'http://www.sina.com'

然后新建vue.config.js

module.exports = {
  publicPath: "./",
  lintOnSave: false, //关闭eslint
  outputDir: process.env.outputDir, 
};

然后在页面中就可以使用:

const baseUrl = process.env.VUE_APP_BASE_URL

npm run dev 时系统则会使用 .env.development
npm run build 时系统则会使用 .env.production

(3)楼主的是第三种情况。
在开发Vue项目中,有时我们需要去打包部署两套代码,分别为测试和生产。
在根目录下在创建一个系统环境env.test (名称随便取)

NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_BASE_URL = "http://www.baidu.com"

在项目中区分
在项目中就可以区分开来了,例如在使用axios的地方设置baseUrl

if (process.env.VUE_APP_MODE == 'test') {
  axios.defaults.baseURL = 'http://test.com.cn' // 测试环境
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://www.baidu.com' // 生产环境
} else if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://www.baidu.com' // 开发环境
}

然后在package.json文件中

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue2中打包时npm run build传递参数

    vue2中打包时npm run build传递参数

  • 跪求用C#检测预览图正常打开显示不全的

    跪求用C#检测预览图正常打开显示不全的

  • github看不到commit列表

    github看不到commit列表

  • shell如何运行多个python并且自重启

    shell如何运行多个python并且自重启

腾讯云代理商
海外云服务器