vue3+ts+vite 问题汇总-环境变量（三）

环境变量配置

第一步:安装cross-env

yarn add cross-env -D

第二步：在根目录新建 .env 、 .env.test 和 .env.prod，并写入对应代码

# 项目本地运行端口号
VITE_PORT = 8848

# 开发环境读取配置文件路径
VITE_PUBLIC_PATH = /

# 开发环境代理
VITE_PROXY_DOMAIN = /api

# 开发环境路由历史模式（Hash 模式：`hash`、HTML5 模式：`h5`、Hash 模式带base参数："hash,base参数"、HTML5 模式带base参数："h5,base参数"）
VITE_ROUTER_HISTORY = "hash"

# 开发环境后端地址
VITE_PROXY_DOMAIN_REAL = "http://127.0.0.1:3000"

第三步：配置 package.json 的运行脚本

//第一种在这里写环境
 "scripts": {
    + "dev": "cross-env --max_old_space_size=4096 vite --mode dev",
    + "build": "cross-env vue-tsc --noEmit && vite build --mode dev",
     ....
   }
//执行命令
npm run dev

第二种：也可以直接在命令行修改
npm run dev --mode production

第四步：组件中使用

import.meta.VITE_PORT

第五步：vite.config.ts中使用

import { defineConfig, loadEnv, UserConfig } from 'vite';
...
export default defineConfig(({ mode }: UserConfig): UserConfig => {
  const env = loadEnv(mode, __dirname);
  return {
    server: {
      host: '127.0.0.1', //解决"vite use `--host` to expose"
      port: Number(env.VITE_PORT),
      ...