vue3+vite2+ts项目配置环境变量和模式

作者：管理员 2022-06-08 10:58:52 分类：Vue3新篇章阅读（1589） 0

环境变量是开发项目时候不可或缺的东西，那么我们在vite2项目中如何配置，通常我们会用到两种模式

一、package.json中设置

1
2
3
4
5
6

"scripts": {
"dev": "vite --mode development",
"build:beta": "vite build --mode beta",
"build:release": "vite build --mode release",
"serve": "vite preview"
},

注意，--mode xx是固定写法，是对应的模式，其实vite在这里内置了两个环境变量，通过dev启动时候默认就是development，build对应的默认就是production。在这里设置的环境变量通常我们可以在vite.config文件中使用对应的环境变量值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// const path = require('path');
import { resolve } from 'path'; // 该方式依赖webpack
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig(({ command, mode }) => {
/*
mode: development | production 来自package.json的script
command: serve | build 判断是启用本地服务还是项目进行打包操作
process.env.NODE_ENV也可以拿到环境变量
*/
return {
plugins: [
vue(),
],
resolve: {
// 配置路径别名
alias: {
'@': resolve(process.cwd(), './src'), //采用process.cwd()而不是__dirname
},
},
};
return;
});

二、环境文件

.env.[模式名]，例如: .env.development，在development模式下会读取该文

剩余50%内容付费后可查看

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(0) 打赏

标签：

Vite Vue3 环境变量

上一篇：vue3+vite2中使用unplugin-auto-import eslint插件vscode报错警告

下一篇：vue3+vite2+elment plus按需自动引入+国际化配置

vue3+vite2+ts项目配置环境变量和模式

一、package.json中设置

二、环境文件

相关推荐

共 0 条评论关于"vue3+vite2+ts项目配置环境变量和模式"

点击取消