vue 项目环境变量设置

最新推荐文章于 2024-08-23 15:00:16 发布

爱宇阳

最新推荐文章于 2024-08-23 15:00:16 发布

阅读量1.8k

点赞数 1

分类专栏： Vue 文章标签： vue 环境变量

本文链接：https://blog.csdn.net/qq_34707272/article/details/106966073

版权

Vue 专栏收录该内容

83 篇文章 11 订阅

订阅专栏

一、.env.development 开发环境

# 开发环境

# 环境标志
ENV = 'development'

# 基础API
VUE_APP_BASE_API = '/dev-api'

开发环境跨域代理

"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 = '/prod-api'

三、.env.staging 测试环境

# 测试环境
NODE_ENV = 'production'

# 环境标志
ENV = 'staging'

# 基础API
VUE_APP_BASE_API = '/stage-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",
  },
}