vue2 配置运行环境

vue2 配置运行环境

在 vue2 项目中配置运行环境

  • 在项目中新建 .env.development 文件 和 .env.production 文件
  • .env.development
javascript 复制代码
NODE_ENV = 'development'
//指定当前环境模式
VUE_APP_MODE = 'development'
VUE_APP_BASE_URL = "/dev-api"
  • .env.production
javascript 复制代码
NODE_ENV = "production"
//指定当前环境模式
VUE_APP_MODE = 'production'
VUE_APP_BASE_URL = "http://"  // 线上地址
  • 配置 vue.config.js 文件
javascript 复制代码
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  outputDir: "dist",
  assetsDir: "static",
  devServer: {
    proxy: {
      [process.env.VUE_APP_BASE_URL]: {
        target: 'http://',  // 本地后台地址
        changeOrigin: true,
        pathRewrite: {
        [`^${process.env.VUE_APP_BASE_URL}`]: ''
        }
      }
    },
  },
  transpileDependencies: true,
  lintOnSave: false,
}
  • request/index.js 中添加 baseURL
javascript 复制代码
import axios from "axios"

const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 10000,
  headers: {
    "Content-Type": "application/x-www-form-urlencoded;charset=utf8",
  },
  responseType: "json",
})
相关推荐
九丝城主1 分钟前
1V1音视频对话2--Web 双浏览器完整通话测试(强制 relay)
前端·音视频
C澒1 分钟前
以微前端为核心:SLDSMS 前端架构的演进之路与实践沉淀
前端·架构·系统架构·教育电商·交通物流
明月_清风3 分钟前
OAuth2 与第三方登录的三个阶段(2010–至今)
前端·安全
We་ct4 分钟前
LeetCode 138. 随机链表的复制:两种最优解法详解
前端·算法·leetcode·链表·typescript
dcmfxvr5 分钟前
【无标题】
java·linux·前端
无巧不成书021814 分钟前
React Native 深度解析:跨平台移动开发框架
javascript·react native·react.js·华为·开源·harmonyos
SoaringHeart23 分钟前
Flutter 顶部滚动行为限制实现:NoTopOverScrollPhysics
前端·flutter
zhanglu511627 分钟前
Java Lambda 表达式使用深度解析
开发语言·前端·python
全栈前端老曹27 分钟前
【Redis】发布订阅模型 —— Pub/Sub 原理、消息队列、聊天系统实战
前端·数据库·redis·设计模式·node.js·全栈·发布订阅模型
广州华水科技35 分钟前
单北斗GNSS变形监测系统应用与安装指南
前端