Vue3实践Vue3使用vite处理环境变量打包部署nginx配置

Posted 挥之以墨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3实践Vue3使用vite处理环境变量打包部署nginx配置相关的知识，希望对你有一定的参考价值。

文章目录

1.前言

由于在日常开发中会有一部分前端的开发任务，会涉及到Vue的项目的搭建、迭代、构建发布等操作，所以想系统的学习一下Vue相关的知识点，本专题会依照Vue的搭建、开发基础实践、进阶用法、打包部署的顺序进行记录。

历史文章链接如下：

《Vue3搭建、路由配置与基本语法》
《响应式变量、双向绑定、计算属性、监听器》
《优雅使用VUE3 组件特性：组件定义、组件注册、事件监听、双向绑定》
《优雅使用VUE3 组件特性：属性透传、依赖注入、组件插槽、动态组件》
《生命周期函数、组合式函数的使用》

本篇的主要内容包含：vite环境变量的作用及其使用方式及其打包打包部署。严格的说这些内容不完全属于Vue3的内容，但是我们在做Vue开发的时候，又无可避免的需要使用到它们，所以就放在Vue中进行梳理和学习了，《Vite文档地址》。

2.环境变量

顾名思义，环境变量就是在不同的环境中使用不同的变量值。可以通过.env文件来定义环境变量，再通过import.meta.env来使用定义的环境变量即可。

2.1.环境变量文件(.env)

.env指的是文件名而不是后缀名，它是一种放置在Vue根目录下的文件，它的特殊之处在于文件名的约定，我们在启动服务、构建项目时会根据文件的名称来进行匹配，常用的有两种形式： .env 和 .env.[mode]

这里的[mode]是模式的意思，我们可以使用一些自定义的命名方式来命名定义模式，例如有4种不同的环境需要定义，分别是开发、测试、预发、生产，我们就可以定义4中模式

  • .env.development
  • .env.test
  • .env.stage
  • .env.production

其中 developmen 和 production 是Vite中的两种默认的模式，当我们通过vite指令在本地启动服务时，会默认加载.env.development中的变量，而通过vite build进行打包时，会默认加载.env.produciton文件中的变量。

当前，也可以通过在指令后面加上--mode 模式名的方式来明确的指定一个环境变量文件进行加载，例如构建测试环境可以通过vite build --mode test来处理。

除此之外，我们在各个环境中的通用配置，可以直接写到以.env命名的文件中，.env文件中的变量在任何模式下都可以加载，但需要注意的是，.env文件下的变量优先级是低于.env.[mode]文件的，也就是说，如果有相同的变量，.env文件中的变量会被覆盖掉。

2.2.环境变量变量定义与使用

字段是直接写在.env文件中的，字段名VITE_xxx进行定义，只有以VITE为前缀的字段会暴露给客户端直接使用，例如在4个不同的文件中通过一个字段来定义当前的环境。

VITE_ENV=development
VITE_ENV=test
VITE_ENV=stage
VITE_ENV=production

定义好后，可以在服务中的任意一个.js文件中通过import.meta.env.变量名来使用，例如我在App.vue的js中输入了下面的代码。

<script setup>
	console.log(import.meta.env.VITE_ENV)
</script>

通过不同的模式进行打包后，进入首页就会在控制台中输出不同的字段值了。

注：环境变量经常会使用在axios上，在不同的环境中请求不同的服务端的路径。

3.打包部署

我们是通过 node+vite 进行的构建打包，所以需要在package.json中的scripts属性上编辑打包的指令，这里同样也是4个环境：

"scripts": 
    "dev": "vite",
    "test": "vite build --mode test",
    "stage": "vite build --mode stage",
    "build": "vite build",
,

上面我们已经提过了，vite指令与vite build指定是对应了默认值devolepment和production，所以此处只需要指定测试与预发环境的模式。

配置完成之后，通过npm指令即可完成打包，例如打包生产环境：

npm run build

打包完成之后在项目的根目录中会生成一个dist文件夹，这里面就是用于部署站点的静态文件，我们一般会通过web服务器来代理这个文件夹，例如nginx。

3.1.nginx配置

server 
    listen       80;
    server_name  www.huizhiyimo.cn;

	location /vue-demo 
		alias  D:/personal/vue-demo/dist/;
		index  index.html index.htm;
		try_files $uri $uri/ /vue-demo/index.html;
  • location：配置url路径匹配关系，这里配置/vue-demo就是定义了一个标识，在有多个vue服务时，可以做区分
  • alias：指定静态文件目录的根路径
  • index：指令用于指定在请求的URL中未指定文件名时要使用的默认文件名
  • try_files：意思是优先根据浏览器输入的文件路径进行查找，如果找不到重定向到index.html文件

nginx配置完成之后，需要将www.huizhiyimo.cn在hosts配置映射（因为没有这个实际的域名，需要我们自行配置本地dns映射）：

127.0.0.1    www.huizhiyimo.cn

配置完成之后通过http://www.huizhiyimo.cn/vue-demo/访问Vue服务首页，此时会根据nginx中配置的路径，将请求转发到D:/personal/vue-demo/dist/路径，并查找路径下的index.html文件。

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="module" crossorigin src="/assets/index-fc58d58f.js"></script>
    <link rel="stylesheet" href="/assets/index-89f47b86.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

注意上面文件内容中的两个路径：/assets/index-fc58d58f.js 与 /assets/index-89f47b86.css，此时访问者两个文件会通过域名http://www.huizhiyimo.cn/+这两个路径进行请求，如下图所示：

由于我们配置的的location是/vue-demo，所以此处将无法找到这两个静态文件。要解决这个问题有两个方式：

  1. 修改nginx配置，将location上的/vue-demo修改为/
  2. 在Vue服务中配置静态站点的根路径

第一个种方式在一个服务器中只部署一个服务时可以使用，例如通过docker来部署vue服务时，一个容器中只会有一个服务，没有其他服务的冲突就可以直接设置为/

第二种方式好处在于兼容性更强，更建议采用这种方式。

3.2.静态站点根路径配置

在Vue的根路径下，有一个vite.config.js的配置文件，打开这个文件后，可以加入以下的配置：

export default defineConfig(
  // 或者使用 base:'/vue-demo'
  base: './',
);

此处将 base 选项在不配置的时候默认是/，这就是为什么上面的请求中不会带有/vue-demo这个路径，所以我们可以配置为 base:'/vue-demo'，这时候浏览器中后续所有的路由请求都会以/vue-demo作为前缀。

但是这种方式将路径写死了，我们在后续的迭代中如果想修改nginx上的路径/vue-demo时，还必须同步修改vite中的配置，比较容易出bug。

所以更好的方式是，直接设置为 base: './'，意思是，所有的路由请求都会在相对于index.html的位置上发起，而此时的请求路径为http://www.huizhiyimo.cn/vue-demo/index.html，后续所有的请求都会以http://www.huizhiyimo.cn/vue-demo/为前缀，此时我们修改nginx的location配置后，就不需要再修改vite的配置了。

重新构建后，访问成功：

4.总结

本篇的主要内容是Vite中环境变量的使用以及打包部署，包含以下关键点：

  • 环境变量
    • 通过.env文件来划分环境，命名规则为.env.[mode]
    • vite指令的默认mode为development，vite build的默认mode为production，可以根据这个默认值来命名
    • .env文件也可以不加mode，这样的文件在任何情况下都可以被引用，但是优先级低于有[mode]的文件
    • 如果想让客户端直接使用，.env文件中的变量名应该以VITE_作为前缀
    • 在项目的js文件中，可以通过import.meta.env.变量名使用环境变量
  • 打包部署
    • 通过vite build可以打包部署生产环境，如果想部署其他环境可以通过vite build --mode 模式名的方式进行打包，这里的模式名就是.env.[mode]中的mode值
    • 打包完成之后会在根目录下生成一个./dist目录，在这个目录下就是可以部署的静态站点
    • 静态站点可以通过web服务器进行代理，如nginx
    • 如果在nginx配置的location中包含了项目前缀，例如/vue-demo，则需要在Vue项目的vite.config.js中加入base:'./的配置

Vue3 —— 使用Vite配置环境变量

文章目录

  • 一、为什么要配置环境变量?
  • 二、在Vite中配置环境变量
    • 1.环境变量和模式
    • 2.环境变量
    • 3.生产环境替换
    • 4.env 文件
  • 总结

一、为什么要配置环境变量?

在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一个环境可能都会有所差异，比如说用户访问资源权限、服务器地址、接口地址等。在各个环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。

二、在Vite中配置环境变量

1.环境变量和模式

因为项目使用VIte创建的，所以在配置环境变量之前我们需要查看在Vite中的环境变量和模式，官网地址 

2.环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

  • import.meta.env.MODE: string 应用运行的模式。

  • import.meta.env.BASE_URL: string 部署应用时的基本 URL。他由base 配置项决定。

  • import.meta.env.PROD: boolean 应用是否运行在生产环境。

  • import.meta.env.DEV: boolean 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

  • import.meta.env.SSR: boolean 应用是否运行在 server 上。

3.生产环境替换

在生产环境中，这些环境变量会在构建时被静态替换，因此，在引用它们时请使用完全静态的字符串。动态的 key 将无法生效。例如，动态 key 取值 import.meta.env[key] 是无效的。

4.env 文件

在根目录下新建这两个文件

 

.env.dev  文件

NODE_ENV = dev
VITE_NAME="LJY"

.env.pro 文件

NODE_ENV = pro
VITE_NAME="LJY"

Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：

环境加载优先级

一份用于指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env）。

另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。

.env 类文件会在 Vite 启动一开始时被加载，而改动会在重启服务器后生效。

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量：

VITE_SOME_KEY=123
DB_PASSWORD=foobar

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

如果你想自定义 env 变量的前缀，请参阅 envPrefix。

安全注意事项

如果你想要自定义 env 变量的前缀，请参阅 envPrefix 选项。

  • .env.*.local 文件应是本地的，可以包含敏感变量。你应该将 .local 添加到你的 .gitignore 中，以避免它们被 git 检入。

  • 由于任何暴露给 Vite 源码的变量最终都将出现在客户端包中，VITE_* 变量应该不包含任何敏感信息。

以上是关于Vue3实践Vue3使用vite处理环境变量打包部署nginx配置的主要内容，如果未能解决你的问题，请参考以下文章

Vue3 —— 使用Vite配置环境变量

tauri+vite+vue3开发环境下创建启动运行和打包发布

vite+vue3 项目打包部署

vite3 + vue3 + pinia 配置 CDN 后打包部署后出现 Failed to resolve module specifier “vue“ 报错处理

vite实践遇到的问题[vite:build-html] EISDIR: illegal operation on a directory, read

vue3中vite的配置