vue2开发中开发环境和生产环境的配置

2022年12月23日 18:01 by wst

vue

---

配置好的环境变量，对于开发会方便很多。

下面列出vue中的配置步骤。

1.  新建开发环境配置文件（.env.development），内容如下：

NODE_ENV = "development"
VUE_APP_API_URL = "http://127.0.0.1:8000"

2. 新建生产环境配置文件（.env.production），内容如下：

NODE_ENV = "production"
VUE_APP_API_URL = "http://192.168.1.133:8081"

3. 新建代理配置（vue.config.js），内容如下：

module.exports = {
    baseUrl: './',
    assetsDir: 'static',
    productionSourceMap: false,
    devServer: {
        proxy: {
            '/api':{
                target: process.env.VUE_APP_API_URL,
                changeOrigin:true,
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}

4. 运行方式：

# 开发环境
npm run dev
# 生产环境
npm run build

 

这样就方便多了，有时上线忘记修改地址，造成很大损失。

---