vue3+vite与vue2+webpack 分别配置环境变量

最新推荐文章于 2024-05-06 14:06:37 发布

金包银是喵桑

最新推荐文章于 2024-05-06 14:06:37 发布

阅读量619

点赞数

分类专栏： vue 文章标签： webpack vue.js javascript vite

本文链接：https://blog.csdn.net/weixin_42674490/article/details/127998564

版权

vue 同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

vite

2 篇文章 1 订阅

订阅专栏

在项目目录下新建 .env.development 和 .env.production 文件

一. vue2+webpack配置环境变量

1. 配置文件.env内容，注意: 前缀是VUE， ‘/api’ 为代理地址

.env.development

NODE_ENV = 'development'
VUE_APP_ENV = 'development'
VUE_APP_BASE_URL = '/api'
VUE_APP_OUTPUT = 'dev'

.env.production

NODE_ENV = 'production'
VUE_APP_ENV = 'production'
VUE_APP_BASE_URL = ''
VUE_APP_OUTPUT = 'dist'

2.js使用

axios.defaults.baseURL=process.env.VUE_APP_BASE_URL;

二. vue3+vite配置环境变量

1. 配置文件.env内容，注意: 前缀是VITE

.env.development

NODE_ENV = 'development'
VITE_APP_ENV = 'development'
VITE_APP_BASE_URL = '/api'
VITE_APP_OUTPUT = 'dev'

.env.production

NODE_ENV = 'production'
VITE_APP_ENV = 'production'
VITE_APP_BASE_URL = ''
VITE_APP_OUTPUT = 'dist'

2. 配置vite.config.ts文件

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  loadEnv(mode, process.cwd());
  return {
    server:{
      https: false,
      // hrm: true,
      port: 8008,
      host: 'localhost',
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:8089',
          changeOrigin: true,
          ws: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
    },
    ...
  }
})

3. js使用

axios.defaults.baseURL= import.meta.env.VITE_APP_BASE_URL,

三. 总结

区别	vue2+webpack	vue3+vite
.env中配置前缀	VUE	VITE
调用	process.env.VUE_xxxx	import.meta.env.VITE_xxx
config配置	无需配置	需配置