关于vue.js:vue3tsvite-问题汇总环境变量三

环境变量配置

第一步: 装置 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),
      ...