vue中.env的环境变量配置_vue dev.env.js自定义设置变量-CSDN博客

本文链接：https://blog.csdn.net/lwc18639470699/article/details/132665556

本文介绍了如何在Vue.js项目中通过创建.env文件管理开发和生产环境变量，以及在vue.config.js中配置axios的baseURL和代理，确保在不同环境下的请求路径正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为本地开发时请求地址和线上环境请求地址不一致，部署路径不一致，其他环境变量因为部署环境不一致的原因，配置.env为了方便打包和开发

1.先在文件根目录创建你所需的环境一般为开发,生产,测试(我这里举例开发和生产环境);

2.在.env.development中写入

NODE_ENV=development  //为开发环境
VUE_APP_BASE_URL='http://192.168.2.85:8180/' //在本地所请求的路径
VUE_APP_PREVIEW=true

在.env.production中写入

NODE_ENV=production //为生产环境
VUE_APP_BASE_URL='https://192.168.4.33' //开发环境下所请求的路径
VUE_APP_PREVIEW=true

3.在vue.config.js文件夹中进行相关配置(可通过process.env.NODE_ENV来判断生产环境)

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false, // 取消 .map 文件的打包，加快打包速度
  publicPath: "/message",// 公共路径 默认为 '/' , 建议使用 './' 相对路径
  outputDir: process.env.NODE_ENV=='development' ? 'dist':'message', //生成文件夹的目录名称(例如:打包生产环境生成的文件夹目录为message)

  devServer: {
    open: true,
    //设置开发接口代理
    proxy: {
      "/api": {
        target:
          "http://192.168.2.85:8180/", 
        changeOrigin: true,
        pathRewrite: {
           "^/api": "http://192.168.2.85:8180/", 
        },
      },
      
    },
  },
})

4.在封装的axios中可以对baseURL的路经拼接进行判断

import axios from 'axios';  // 引入axios
import { Toast } from 'vant';
const production = process.env.NODE_ENV === 'production'
const http = axios.create({
    baseURL: production ? '/payapplet' : '/api',// 当为开发环境时路径拼接/api,生产环境根据公司要求而定
    timeout: 5000  //这是设置请求接口超时的时间，一般都设置为5000~6000
});
 
//导出封装的axios对象
export default http;

5.在package.json(在运行npm run serve 时为开发环境, 运行npm run build 时为生成环境)

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production"
  },

[如有不足和错误的地方请大佬们指出,谢谢]