Vue打包时指定配置文件

fly_or

已于 2022-09-15 15:26:34 修改

阅读量2.6k

点赞数 1

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

于 2022-09-14 11:20:02 首次发布

本文链接：https://blog.csdn.net/fly_or/article/details/126848884

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中根据不同的环境（如production、test、demo）动态加载配置文件。通过设置`process.env.NODE_ENV`，可以在打包或本地运行时指定配置文件，实现配置的灵活切换。例如，本地开发使用'devConfig'，打包生产环境则使用'prodConfig'，并展示了引用配置文件及打包命令的方法。

摘要由CSDN通过智能技术生成

vue工程的配置文件一般放在vue.config.js中，但是有时我们有自己的配置文件，需要在打包时动态切换，可在打包时动态指定node环境变量"process.env.NODE_ENV"切换。

1、新增不同环境的配置文件

2、export指定的配置文件

import devConfig from './config/common/commonConfig_dev.js'
import prodConfig from './config/common/commonConfig_prod.js'
import testConfig from './config/common/commonConfig_test.js'
import demoConfig from './config/common/commonConfig_demo.js'

function config() {
    switch (process.env.NODE_ENV) {
        case "production":
            return prodConfig
        case "test":
            return testConfig
        case "demo":
            return demoConfig
        default:
            return devConfig
    }
}

export default config()

3、项目中引用配置

import CommonConst from '@/commonConfig'

var url = CommonConst['webSocketUrl']

4、本地运行或打包时指定当前环境（模式）

//本地运行，默认为development
yarn serve/npm run serve(dev)

//本地运行，使用demo配置文件
yarn serve --mode demo/npm run dev --mode demo

//打包，默认为production
yarn build/npm run duild

//打包，使用demo配置文件
yarn build --mode demo/npm run build --mode demo