vite.config.js里面使用环境变量
文章目录一、前言二、使用步骤1.创建.env文件2.获取变量3.部署结果三、总结一、前言考虑到一个项目可能会有开发版本、上线版本、测试版本等等多个版本,不同的环境会有不同请求api接口,就需更改一些基本配置,基本路径,服务器代理这种都要更改一遍,这时候就显得很麻烦,所以这里就使用了环境变量提示:以下是本篇文章正文内容,下面案例可供参考二、使用步骤1.创建.env文件 直接在根目录下创建.env后
一、前言
考虑到一个项目可能会有开发版本、上线版本、测试版本等等多个版本,不同的环境会有不同请求api接口,就需更改一些基本配置,基本路径,服务器代理这种都要更改一遍,这时候就显得很麻烦,所以这里就使用了环境变量
提示:以下是本篇文章正文内容,下面案例可供参考
二、使用步骤
1.创建.env文件
直接在根目录下创建.env
后缀的文件,
.env
——全局的,没有设置其他环境变量时,会加载这个文件里的内容,比如所有版本都使用的是同一个接口地址时,就可以写在这一个文件里面就行
.env.development
——开发环境下的配置文件,会覆盖.env
这个文件里定义的环境变量
.env.production
——生产环境下的配置文件,会覆盖.env
这个文件里定义的环境变量
我这里三个文件的环境变量都是一样的
代码如下(示例):
# 基础路径
VITE_APP_BASE_URL=/index/
# 接口地址1
VITE_APP_API1=http://127.0.0.1/1000
2.获取变量
vite.config.ts
获取环境变量的方法
const env = loadEnv(mode, process.cwd()); // 获取.env文件里定义的环境变量
//console.log(env); //变量在命令行里打印出来
vite.config.ts
文件完整代码(我这里是用了上面的两个环境变量)
import path from "path";
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default ({ mode }) => {
//参数mode为开放模式或生产模式
//console.log(mode); // development or product
const env=loadEnv(mode, process.cwd()); // 获取.env文件里定义的环境变量
//console.log(env); //变量在命令行里打印出来
return defineConfig({
plugins: [vue()],
//项目部署在主域名的子文件使用,例如http://localhost:3000/myvite/。不填默认就是/
base: env.VITE_APP_BASE_URL || '/',
build: {
cssCodeSplit: false, //默认ture,将css分割提取到css文件中,false将全部css提取到一个文件里
},
resolve: {
alias: {
//别名配置
"@": path.resolve(__dirname, "src"), //配置src的别名
"@comp": path.resolve(__dirname, "src/components"),
},
},
server: {
proxy: {
// 代理配置
"/api": {
// target: "http://127.0.0.1/1000", //本地服务器环境后台目录D:\phpstudy_pro\WWW\1000
target: env.VITE_APP_API1,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
})
}
3.部署结果
我这里创建了一个www.test.com
的站点,但是我的代码不放在主域名下面,需要放在子文件夹index里面,所以环境变量里面设置了VITE_APP_BASE_URL=/index/
;放主域名下面的话,直接VITE_APP_BASE_URL=/
就行
文件放到index文件夹下面就能访问了,正常使用的话还需要配置 nginx
,点击进入到登录 页面,但是刷新之后就变成下面这个样子了。
在服务器这一块需要配置nginx
,vue项目的配置就已经可以了
建议:router.ts
路由配置文件建议改成下面这种写法
const base_url = import.meta.env.BASE_URL; //获取vite.config.js配置的base,默认是根目录/
const router = createRouter({
history: createWebHistory(base_url),
routes,
});
三、总结
这种一下需要创建多个环境变量文件,改动一下可能会几个变量文件的内容一起更改,一开始会觉得麻烦,但是一个项目后期代码逐渐增多,项目逐渐庞大起来时,这时候用环境变量就显得方便、简单。前期规范好代码结构、语法等等,后面修改、维护、优化代码操作也很容易,在方便自己的同时,也能给他人有良好操作习惯,也便于后人学习,取长补短。
更多推荐
所有评论(0)