唯品秀前端博客

环境变量是开发项目时候不可或缺的东西,那么我们在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
26
// 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';
import requireTransform from 'vite-plugin-require-transform';
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模式下会读取该文件,注意,自定义环境变量前缀必须是VITE_APP_,同样,vite默认支持3个文件模板(.env、.env.development、.env.production),.env文件配置是全局变量,后者如果配置了相同名称变量会覆盖.env内部的同名变量

1
2
3
4
5
# .env.development
# base api
VITE_BASE_API='http://localhost/api'
VITE_LOGIN_URL= 'http://localhost:8080/#/login'
VITE_PUBLIC_PATH = ''

页面代码中使用环境变量

1
2
3
4
5
6
7
8
9
<script>
export default {
  name:"Index",
  setup(){
    const ENV = import.meta.env
    console.log('所有环境变量',ENV);//获取所有当前环境变量,包括script中配置的
  }
}
</script>

自定义环境变量文件

除了上面自带的三个环境变量文件外,如果觉得不够用还可以自定义环境变量文件,文件名以.env.xx格式,例如我们创建个.env.test,接着在package.json配置一条pre命令进行启动服务

1
2
3
4
// package.json配置一条pre命令,mode传test,注意,test就是上面自定义环境变量模板的名称
"scripts": {
    "pre": "vite --mode test",
  },
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(0) 打赏

上一篇:

下一篇:

相关推荐

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

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏