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

末蓝、 2023-10-11 17:46 16阅读 0赞

*  项目目录结构

![在这里插入图片描述][8fb074864b324c44b109517fd00ea218.png]

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

NODE_ENV = 'development'
    outputDir = 'dev'
    VUE_APP_ENVIRONMENT = 'developmentEnv'

NODE_ENV = 'production'
    outputDir = 'dist'
    VUE_APP_ENVIRONMENT = 'productionEnv'

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

![在这里插入图片描述][a2f2adb6f57b4c5db54ccc1cc82d59da.png]  
开发环境和生产环境可配置两个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

其他需要用到配置环境的地方可以引入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'
        }
    });

最后需要在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"
      ]
    }

[8fb074864b324c44b109517fd00ea218.png]: https://img-blog.csdnimg.cn/8fb074864b324c44b109517fd00ea218.png
[a2f2adb6f57b4c5db54ccc1cc82d59da.png]: https://img-blog.csdnimg.cn/a2f2adb6f57b4c5db54ccc1cc82d59da.png