vue 项目环境变量设置

一、.env.development 开发环境

# 开发环境

# 环境标志
ENV = 'development'

# 基础API
VUE_APP_BASE_API = '/api'


VUE_CLI_BABEL_TRANSPILE_MODULES = true

 开发环境跨域代理

"use strict";
const path = require("path");
const defaultSettings = require("./src/settings.js");

function resolve(dir) {
  return path.join(__dirname, dir);
}

const name = "管理系统"; // 页面标题

const port = 9527; // dev port
module.exports = {
  publicPath: "/",
  outputDir: "dist",
  assetsDir: "static",
  lintOnSave: process.env.NODE_ENV === "development",
  productionSourceMap: false,
  // 开发环境跨域代理
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true,
    },
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `https://prod.com`,
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
      },
    },
  },
};

二、.env.production 正式环境

# 生产环境

# 环境标志
ENV = 'production'

# 基础API
VUE_APP_BASE_API = 'https://prod.com/api'

三、.env.staging 测试环境

# 测试环境

NODE_ENV = production

# 环境标志
ENV = 'staging'

# 基础API
VUE_APP_BASE_API = 'https://stage.com/api'

四、package.json 需要配置 scripts 分环境运行

{
  "name": "admin",
  "version": "0.1.0",
  "description": "管理系统",
  "author": "LiuDanyang <thedanyang@gmail.com> ",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
  },
}