vite项目、vue-cli项目环境配置
vite项目、vue-cli项目环境配置
环境分为以下几种
- 本地环境
- 测试环境
- 线上环境
- 其他环境
环境常量
我们在不同环境需要使用不同的配置,例如:线上环境上传文件地址 和测试环境的上传文件地址是不一样的,我们在打包的时候不想手动修改这些地址,使用不同的打包命令就可以生成不同环境的包,这个时候就需要使用到环境变量。
环境常量文件
通常是.env开头的文件,默认可被vite和vue-cli读取的文件有如下两个:
- .env.development
- .env.production
在这里面定义的常量都是可以被读取的:vite和vue-cli有一点区别。
-
vite读取的常量必须VITE_APP开头的
-
vue-cli读取的常量必须VUE_APP开头的
使用环境变量
vite中,分两种使用情况
- 在vite.config.js中,需要使用vite中的loadEnv 方法
loadEnv(mode, process.cwd()).你定义的常量名称
import { loadEnv } from "vite";
export default ({ mode }) =>
defineConfig({
base: loadEnv(mode, process.cwd()).VITE_APP_BUILD_PATH,
build: {
outDir: loadEnv(mode, process.cwd()).VITE_APP_BUILD_NAME,
assetsDir: "static",
minify: "terser",
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
drop_debugger: true,
},
},
} });
- 在项目中
const url = import.meta.env.VITE_APP_BASE_API;
vue-cli中
- 使用process.env.你的环境常量名,在项目中和配置文件的写法相同
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1200000,
});
环境常量工作
请查看以下package.json文件中scripts片段
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build test": "vue-cli-service build --mode test",
},
- npm run serve 读取的默认是.env.development文件中的常量
- npm run build 读取的默认是.env.production
- 同理npm run build test读取的默认是.env.test
现在我们就可以使用不同的npm命令切换环境了。
上面示例使用的 build 和 build test ,是模拟打包线上环境和测试环境。
例如线上环境的baseUrl为/api,测试环境为/proapi,就可以使用这个方式进行区分,只要使用不同npm命令即可。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiabikf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22