vue3脚手架配置开发环境和生产环境的url_vue3 配置生产和开发环境的baseurl

• 项目目录结构

• 在项目根目录下新建.env.development和.env.production文件，并在文件中指定不同环境时的变量值。

NODE_ENV = 'development'
outputDir = 'dev'
VUE_APP_ENVIRONMENT = 'developmentEnv'
1
2
3

NODE_ENV = 'production'
outputDir = 'dist'
VUE_APP_ENVIRONMENT = 'productionEnv'
1
2
3

• 编写一个统一的配置文件

开发环境和生产环境可配置两个js文件，在config.js统一判断一下当前环境

import devConfig from './config.dev'
import prodConfig from './config.prod'

const config = process.env.NODE_ENV == 'development' ? devConfig : prodConfig

export default config

1
2
3
4
5
6
7

其他需要用到配置环境的地方可以引入config.js，如axios

import axios from "axios";
import {ElMessage} from 'element-plus'
import config from "@/config/config";

const axiosInstance = axios.create({
    baseURL:  config.baseUrl ,
    timeout: 1000 * 30,
    withCredentials: true,
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    }
});
1
2
3
4
5
6
7
8
9
10
11
12

最后需要在package.json文件中奖build命令 添加参数
vue-cli-service build --mode production 指定在打包时读取.env.production配置文件，通过读取这个配置文件，遍可以修改打包后的process.env对象的值。

{
  "name": "sci_industrial_web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "element-plus": "^2.2.6",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29