vue2设置运行环境和打包环境变量

环境

javascript 复制代码
 env ------ 所有模式共用
.env.local ------ 所有模式共用,但不会被 git 提交,自动添加到.gitignore
.env.development ------ 仅开发模式使用,使用npm run server时默认会加载此配置文件
.env.developmen.local------ 仅开发模式使用,但会被 git 忽略自动添加到.gitignore,使用npm run server时默认会加载此配置文件
.env.production ------ 仅生产模式使用,使用npm run build时默认会加载此配置文件
.env.staging------ 仅staging模式使用,使用需要配置--mode staging

.env.dev
.env.test
.env.prod

编写配置内容

javascript 复制代码
# 运行环境
NODE_ENV="development"
  
# 设置Axios 基础路径
VUE_APP_BASE_URL = "/api/"

# 设置App运行路径
VUE_APP_MAPP_URL ="https://t.m.xxxx.com" 

# 是否使用Hash路由
VUE_APP_MAPP_URL = 'true'
想要运行环境来设置的话 就可以在这里设置 但是有1点需要注意  这里的前缀必须是VUE_APP_开头
其他的识别不到

在package.json文件中编写启动命令

这里的 env 文件是会默认加载 其他的都需要手动在这里添加启动命令

javascript 复制代码
"scripts": {
    "dev": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve --mode dev",
    "test": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve --mode test",
    "prod": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve --mode prod",
    "build:dev": "vue-cli-service build --mode dev",
    "build:test": "vue-cli-service build --mode test",
    "build:prod": "vue-cli-service build --mode prod",
  }

使用环境变量

启动后 可以随意页面调用配置运行环境里面的  process.env.xxx   

示例 vue2

vue2 使用的是webpack 和vue3使用vite写法不一样哦!!!

javascript 复制代码
const { defineConfig } = require("@vue/cli-service");
const { getProxyConfig } = require('./src/config/proxy');

module.exports = defineConfig({
  publicPath: "/",
  transpileDependencies: true,
  outputDir: "./dist",//打包路径
  devServer: {
    port: 10001,
    proxy: getProxyConfig(process.env.NODE_ENV)//这里传入env运行环境去动态设置proxy
  }
});
javascript 复制代码
function getProxyConfig (env) {
  const urlConfig = {
    '/api': {
      'development': 'http://xxx:10000/api/',
      'test': 'https://xxx/api',
      'production': 'https://xxx/api',
    },
    '/pay': {
      'development': 'http://xxx:10000/pay',
      'test': 'http:/xxx/pay',
      'production': 'https://xxx.com',
    }
  }

  const target = (targetTag, baseUrl) => ({
    target: targetTag,
    changeOrigin: true,
    pathRewrite: {
      [`^${baseUrl}`]: '/',
    },
  });

  return Object.entries(urlConfig).reduce((result, [key, value]) => {
    result[key] = target(value[env], key);
    return result;
  }, {}); 
}

module.exports = { getProxyConfig };
相关推荐
cy玩具20 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json