脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → vite环境变量

vite添加环境变量import.meta.env的方法

 更新时间：2023年10月25日 15:46:03   作者：啃火龙果的兔子  
在不同的文件里面配置不同的环境变量,可以让我们的配置更加容易维护和使用,这里我们说下vite配置环境变量和模式是怎么配置的,对vite环境变量相关知识感兴趣的朋友跟随小编一起看看吧

在不同的文件里面配置不同的环境变量，可以让我们的配置更加容易维护和使用，这里我们说下vite配置环境变量和模式是怎么配置的。
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量，官网上的东西咱这里就不抄了，O(∩_∩)O哈哈~
我们这里直接说怎么做的，毕竟官网上没有实际使用的例子，在下在实际使用的时候还遇到点问题，当然也可以说是自己没用对吧。

package.json里面的scripts修改，增加多个环境模式，如：

"scripts": {
    "dev": "vite serve --mode development",
    "test": "vite serve --mode test",
    "ppe": "vite serve --mode ppe",
    "prod": "vite serve --mode production",
    "build:dev": "vue-tsc --noEmit && vite build --mode development",
    "build:test": "vue-tsc --noEmit && vite build --mode test",
    "build:ppe": "vue-tsc --noEmit && vite build --mode ppe",
    "build:prod": "vue-tsc --noEmit && vite build --mode production",
    "serve": "vite preview"
  }

在项目目录下增加环境变量的文件，如：
.env.development

# 开发环境变量
VITE_APP_TITLE=记账簿development

.env.test

# 质控环境变量
VITE_APP_TITLE=记账簿test

.env.production

# 生产环境变量
VITE_APP_TITLE=记账簿

在vue里面使用，比如：

console.log('VITE_APP_TITLE:' + import.meta.env.VITE_APP_TITLE);

这里面有个问题需要注意，就是字符串里面不能直接用import.meta.env.的方式使用，不然打包的时候会报错，可以用’import.meta\u200b.env.VITE_APP_TITLE’的方式使用，这个其实在官网上有说到，不过没怎么用到的话时间一长就容易忘了，贴下报错信息，方便后面复查：

D:\study\gitee\study\vite2vue3study>npm run build:prod
> vite2vue3study@0.0.0 build:prod D:\study\gitee\study\vite2vue3study
> vue-tsc --noEmit && vite build --mode production
vite v2.5.5 building for production...
✓ 16 modules transformed.
[rollup-plugin-dynamic-import-variables] Unexpected token (12:18)
file: D:/study/gitee/study/vite2vue3study/src/views/About.vue?vue&type=script&lang.ts:12:18
error during build:
SyntaxError: Unexpected token (12:18)
    at Parser.pp$4.raise (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16958:13)
    at Parser.pp.unexpected (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:14466:8)
    at Parser.pp.expect (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:14460:26)
    at Parser.pp$3.parseExprList (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16827:12)
    at Parser.pp$3.parseSubscript (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16192:25)
    at Parser.pp$3.parseSubscripts (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16149:24)
    at Parser.pp$3.parseExprSubscripts (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16133:21)
    at Parser.pp$3.parseMaybeUnary (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16096:17)
    at Parser.pp$3.parseExprOps (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16029:19)
    at Parser.pp$3.parseMaybeConditional (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16012:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vite2vue3study@0.0.0 build:prod: `vue-tsc --noEmit && vite build --mode production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vite2vue3study@0.0.0 build:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2021-09-17T08_00_39_340Z-debug.log

到此这篇关于vite添加环境变量import.meta.env的文章就介绍到这了,更多相关vite环境变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js中substr,substring,indexOf,lastIndexOf的用法小结

    js中substr,substring,indexOf,lastIndexOf的用法小结

    本篇文章主要是对js中substr,substring,indexOf,lastIndexOf的用法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • 纯JS代码实现气泡效果

    纯JS代码实现气泡效果

    js气泡效果，在项目需求中经常遇到。今天小编把大概实现步骤分享到脚本之家平台，感兴趣的朋友可以参考下
    2016-05-05
  • JavaScript你不知道的一些数组方法

    JavaScript你不知道的一些数组方法

    这篇文章主要介绍了JavaScript你不知道的一些数组方法,需要的朋友可以参考下
    2017-08-08
  • plupload+artdialog实现多平台上传文件

    plupload+artdialog实现多平台上传文件

    这篇文章主要介绍了plupload+artdialog实现多平台上传文件的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • 利用HTML5的画布Canvas实现刮刮卡效果

    利用HTML5的画布Canvas实现刮刮卡效果

    大家都玩过刮刮乐吧，都想一夜暴富，本文给大家分享一款利用HTML5的画布Canvas实现刮刮卡效果，需要的朋友可以参考下
    2015-09-09
  • 基于layui数据表格以及传数据的方式

    基于layui数据表格以及传数据的方式

    今天小编就为大家分享一篇基于layui数据表格以及传数据的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • uniapp中uni.navigateBack返回后刷新页面数据的实现

    uniapp中uni.navigateBack返回后刷新页面数据的实现

    本文主要介绍了uniapp中uni.navigateBack返回后刷新页面数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • Javascript中document.referrer隐藏来源的方法

    Javascript中document.referrer隐藏来源的方法

    这篇文章主要介绍了Javascript中document.referrer隐藏来源的方法，文中通过一个实例给大家介绍了实现的方法，有需要的朋友可以参考借鉴，下面来一起学习学习吧。
    2017-01-01
  • 关于Ajax的原理以及代码封装详解

    关于Ajax的原理以及代码封装详解

    AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），相信大家对ajax都很熟悉，下面这篇文章主要给大家介绍了关于Ajax原理以及代码封装的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-09-09
  • JS实现页面进入和返回定位到具体位置

    JS实现页面进入和返回定位到具体位置

    其实浏览器也自带了返回的功能，也就是说，自带了返回定位的功能，返回定位到具体位置有两种方法，下面通过场景分析给大家详细讲解，需要的的朋友参考下
    2016-12-12

最新评论