基于Vite3.0创建Vue3项目

以你之姓@ 2023-10-11 18:32 30阅读 0赞

这里演示一下如何使用Vite3.0创建Vue3.0项目，以及生产与开发环境的环境变量配置。

  • 初始化项目

    npm create vite@latest
    npm install
    npm run dev

  • 项目目录结构

在这里插入图片描述

  • 在根目录下创建三个文件

在这里插入图片描述

  1. .env:这个文件里面的变量在开发环境和测试环境都会加载
  2. .env.development:这个文件里面的变量只会在开发环境加载
  3. .env.production:这个文件里面的变量只会在生产环境加载，也就是npm run build后

根据vite官方说明，环境变量必须以VITE_开头才可以被正常解析

在这里插入图片描述

  • 使用全局变量

以 import.meta.env.xxxx 的方式来读取环境变量

  1. let config = import.meta.env
  2.   console.log(config)

读取到的内容如下：

在这里插入图片描述

  • 将项目打包后再运行就可以读取到 .env.production文件中配置的环境变量

!\]https_img-blog.csdnimg.cn_93efa4939bfb4bdf8267b6e0c54ca747.png

还是要和webpack打包方式区别一下的。process.env VS import.meta.env

发表评论

表情：
评论列表 （有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读