VITE+VUE3跨域环境变量配置全过程
作者：落魄前端，在线炒粉
文章介绍了如何在Vue项目中使用Vite管理环境变量,并根据不同的环境（开发、生产）设置相应的变量,它还指导如何在Vue文件和vite.config.ts中获取这些环境变量,并在生产环境中处理跨域问题
一、在项目根目录下新建以下三个文件
1) .env (全局默认配置环境)
2) .env.development (开发环境， 对应npm run dev)
3) .env.production (生产环境，对应npm run build)
二、分别在.env.development,.env.production 写入环境变量
1) .env.development
// .env.production VITE_APP_TITLE = "线上版本" VITE_BASE_URL = "https://xxx.xxx.xxx(根据项目实际情况配置)"
2) .env.development
// .env.development VITE_APP_TITLE = "开发版本" VITE_BASE_URL = "https://xxx.xxx.xxx(根据项目实际情况配置)"
根据项目实际情况，加入所需要的变量，变量命名以VITE_为开头
在vue文件中获取环境变量的方法
// .vue文件获取环境变量 console.log(import.meta.env) console.log(import.meta.env.VITE_APP_TITLE) console.log(import.meta.env.VITE_BASE_URL)
在vite.config.ts中获取环境变量的方法
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, __dirname)
console.log(env.VITE_APP_TITLE, env.VITE_BASE_URL)
return {
plugins: [vue(),styleImport({
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => `vant/es/${name}/style`,
},
],
}),],
resolve: {
alias: {
'@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
}
},
base: './', // 设置打包路径
server: {
port: 4000, // 设置服务启动端口号
open: true, // 设置服务启动时是否自动打开浏览器
cors: true, // 允许跨域
// 设置代理，根据我们项目实际情况配置
proxy: {
'/api': {
target: env.VITE_BASE_URL, // 环境变量
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace('/api/', '')
}
}
}
}
})
三、线上环境(npm run build以后)跨域问题处理
在axios中，判断当前环境后再请求前配置好baseUrl
import axios from 'axios'
var http = axios.create({
timeout: 1000 * 20,
baseURL: import.meta.env.DEV? '': import.meta.env.VITE_BASE_URL
})
// 请求响应器
http.interceptors.request.use(
(config) => {
return config
},
function (error) {
// 返回错误信息
return Promise.reject(error)
}
)
http.interceptors.response.use(
(response) => {
return response
},
(error) => {
return Promise.reject(error.response)
}
)
export default http
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。