vite+vue3项目根据环境不同统一配置不同的标题

要统一配置系统名称、系统端口号、系统跨域处理等等，在vue3中使用 vite 的环境变量，那么就要创建两个文件 .env.development（开发环境） 和 .env.production（生产环境）,这两个文件要在项目的根目录下 ，当然还有测试环境这里就不说了。

// .env.development 配置

# 变量必须以VITE_为前缀才能暴露给外部
NODE_ENV = 'development'
VITE_APP_TITLE = 'Aven'
VITE_APP_BASE_API = '/api'

// .env.production 配置

# 变量必须以VITE_为前缀才能暴露给外部
NODE_ENV = 'production'
VITE_APP_TITLE = '咖啡馆减肥药'
VITE_APP_BASE_API = '/prod-api'

上面就是一些系统的统一配置简单的举例。

当然了，要使用还需要借助一个插件来完成：

npm install vite-plugin-html -D

安装完成，在vite.config.ts中配置：

import { ConfigEnv, UserConfigExport, loadEnv } from 'vite'

// 引入插件
import { createHtmlPlugin } from 'vite-plugin-html'

// 声明一个函数用于获取当前的环境
const getViteEnv = (mode, target) => {
  return loadEnv(mode, process.cwd())[target]
}


export default (({ command, mode }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),

      ......

      createHtmlPlugin({
        inject: {
          data: {
            title: getViteEnv(mode, 'VITE_APP_TITLE')
          }
        }
      })
    ],
  }
})

上面配置完成以后，还要再 index.html中修改 title标签：

<title><%- title %></title>

如上，配置完成以后，就会根据环境的不同来显示不同的标题了。