Vue多环境配置

最新推荐文章于 2024-08-30 17:04:02 发布

朽木自雕xmzd

最新推荐文章于 2024-08-30 17:04:02 发布

阅读量1.1k

点赞数

分类专栏：前端 # vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_16687863/article/details/115081655

版权

前端同时被 2 个专栏收录

107 篇文章 2 订阅

订阅专栏

vue

34 篇文章 0 订阅

订阅专栏

Vue多环境配置

一、需求

由于开发环境和生产环境的配置文件不一样，所以要进行自动化加载对应环境的配置

二、项目目录

在这里插入图片描述

三、添加配置文件

.env.dev

NODE_ENV = 'development'
VUE_APP_MODE = 'dev'
VUE_APP_API_URL = 'http://localhost:8080'
VUE_APP_UPLOAD_URL = 'http://localhost:8080'
outputDir = dist

.env.prod

NODE_ENV = 'production'
VUE_APP_MODE = 'prod'
VUE_APP_API_URL = 'http://175.24.152.200'
VUE_APP_UPLOAD_URL = 'http://175.24.152.200'

四、使用

由于我这里使用的axios请求库，所以在这里进行改动，配置文件中变量使用process.env.变量名进行使用

axios.defaults.baseURL = `${process.env.VUE_APP_API_URL}/api/`

五、启动脚本

在package.json中指定命令脚本运行的环境
package.json

  "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode dev",
    "build-prod": "vue-cli-service build --mode prod",
    "build-pre": "vue-cli-service build --mode pre",
    "lint": "vue-cli-service lint"
  }

六、跨域

vue.config.js

module.exports = {
  // 相当于webpack-dev-server,  对本地服务器进行配置
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8000/", // 需要跨域的目标url ,我这里是自己本地起的一个服务端口
        changeOrigin: true, // 将基于名称的虚拟托管网站的选项，如果不配置，请求会报404
        ws: true
      }
    }
  }
}