首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3+js Vite多环境端口配置

vue3+js Vite多环境端口配置以及@别名设置的一次尝试过程

2025-08-21 11:38:19 作者：总有一天砸电脑

Vite作为一个新兴的前端构建工具,提供了快速的冷启动、即时模块热更新以及真正的按需编译,极大地提高了Vue开发效率,这篇文章主要介绍了vue3+js Vite多环境端口配置以及@别名设置的一次尝试的相关资料,需要的朋友可以参考下

一、相对路径别名设置

看见有两种写法的，试了一下都可以，但用__dirname的似乎比较多

1. 方法一：使用 resolve(__dirname, “./src”)

编辑vite.config.js文件：

import { resolve } from "path";

resolve: {
	alias: {
		// 起个别名，在引用资源时，可以用‘@/资源路径'直接访问
		"@": resolve(__dirname, "./src")
		}
	},

如果提示找不到 path 或其相对应的类型声明：

npm install @types/node --save-dev

2. 方法二：使用 fileURLToPath(new URL(‘./src’, import.meta.url))

编辑vite.config.js文件：

import { fileURLToPath, URL } from 'node:url'

resolve: {
    alias: {
      // 起个别名，在引用资源时，可以用‘@/资源路径'直接访问
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },

编辑package.json文件：

"type": "module"

3. 区别

3.1 new URL(‘./src’, import.meta.url)

import.meta.url ：返回当前模块的完整 file:// URL（如 file:///project/src/index.js）
需配合 new URL() 解析相对路径，再通过 fileURLToPath 将 URL 转换为文件系统路径。

要求: 必须在 ESM 文件中使用（即 package.json 中需设置 “type”: “module”，或文件后缀为 .mjs）。

3.2 resolve(__dirname, “./src”)

__dirname ：返回当前文件所在目录的绝对路径（如 /project/src）。
通过 resolve(__dirname, "./src") 拼接路径。

要求: 只能在 CommonJS 文件中使用（默认的 .js 或 .cjs 文件）。

3.3 总结

	fileURLToPath(new URL(‘./src’, import.meta.url))	resolve(__dirname, “./src”)
模块系统	ESM	CommonJS
路径基准	相对于当前文件 URL	相对于当前文件目录

4. 可选配置 jsconfig.json

作用是让编辑器（如 VS Code）识别路径别名，提供代码提示、跳转等智能支持。

若不配置 jsconfig.json，Vite 项目仍可运行，但编辑器可能无法识别别名，显示路径错误提示（实际不影响构建结果）。

在项目根目录创建/修改 jsconfig.json，告知编辑器路径别名的映射关系：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

二、多环境端口配置

vite:官方文档对环境配置的描述： https://vitejs.cn/vite3-cn/guide/env-and-mode.html#env-variables

1. 关于.env 文件

.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local #只在指定模式下加载，但会被 git 忽略

环境加载优先级：.env.[mode] > .env

2. 创建.env文件

在根目录下创建以下文件(和vite.config.js保持同级目录)：

PS: 写环境变量和其它变量，必须要以VITE_开头，例如 :

若环境变量和其它变量不想以VITE_开头，则可以在 vite.config.js 文件中添加

envPrefix: "自定义开头"

2.1 .env文件 (全局环境)

# title
VITE_GLOB_APP_TITLE = 'vue-demo'

# port
VITE_PORT = 3301

# open 运行 npm run dev 时自动打开浏览器
VITE_OPEN = true

# 是否生成包分析文件
VITE_REPORT = false

# 是否开启gzip压缩
VITE_BUILD_GZIP = false

# 是否删除生产环境 console
VITE_DROP_CONSOLE = true

2.2 .env.development文件 (本地环境)

# 本地环境
NODE_ENV = 'development'

# 本地环境接口地址
VITE_API_URL = 'http://localhost:3301'

2.3 .env.production文件 (线上环境)

# 线上环境
NODE_ENV = "production"

# 线上环境接口地址
VITE_API_URL = "http://localhost:8082"

2.4 .env.test文件 (测试环境)

# 测试环境
NODE_ENV = "test"

# 测试环境接口地址
VITE_API_URL = "http://localhost:8083"

3. 修改 package.json 文件

默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。
你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式

 "dev": "vite --mode development",
 "test": "vite --mode test",
 "prod": "vite --mode production",

 "build:dev": "vite build --mode development",
 "build:prod": "vite build --mode production",
 "build:test": "vite build --mode test",

4. 使用ENV配置

一般情况下使用import.meta.env来获取文件中的配置

例如尝试输出：

console.log(import.meta.env)
console.log(import.meta.env.VITE_API_URL)

5.修改 vite.config.js 文件

5.1 使用loadEnv()

在 vite.config.js 中输出 import.mjeta.env 会返回undefined。

因为import.meta.env 是在 Vite 服务运行时注入到代码中的浏览器环境的环境变量，而vite.config.js编译的时间在Vite 服务运行之前

此时就要使用到 loadEnv():Vite 提供了 loadEnv 函数，用于在 Node.js 中加载 .env 文件的环境变量

import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  // 加载当前模式下的环境变量（包括 .env, .env.[mode] 等）
  
  // 第三个参数为空字符串，加载所有变量
  // const env = loadEnv(mode, process.cwd(), '');
  // 或指定前缀（如 'VITE_'）以仅加载特定变量
  // const env = loadEnv(mode, process.cwd(), 'VITE_');
  
  // 默认输出'VITE_'前缀变量
  const env = loadEnv(mode, process.cwd()); 
  console.log(env)
  
  return {
    server: {
      host: '0.0.0.0', // url地址,监听所有网络接口
      port: 3001, // 指定端口号
      open: true  // 启动后自动打开浏览器
    },
  };
});

由于输出的全是字符串变量和规定的环境变量类型不太符合，会出问题：

// 直接使用的情况
server: {
      host: '0.0.0.0', // url地址,监听所有网络接口
      port: env.VITE_PORT, // 指定端口号
      open: env.VITE_OPEN  // 启动后自动打开浏览器
    },

所以要新建一个getEnv.js文件进行转换.

5.2 新建getEnv.js文件

export function wrapperEnv(envConf) {
	const ret = {};

	for (const envName of Object.keys(envConf)) {
		let realName = envConf[envName].replace(/\\n/g, "\n");
		realName = realName === "true" ? true : realName === "false" ? false : realName;

		if (envName === "VITE_PORT") {
			realName = Number(realName);
		}
		if (envName === "VITE_PROXY") {
			try {
				realName = JSON.parse(realName);
			} catch (error) {}
		}
		ret[envName] = realName;
		process.env[envName] = realName;
	}
	return ret;
}

5.3 最终 vite.config.js文件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import {wrapperEnv} from "./src/utils/getEnv.js"; //因为在Node.js执行配置文件时，Vite的别名配置尚未生效,所以此处无法用别名 @/utils/getEnv.js

// https://vite.dev/config/
export default defineConfig(({ mode}) => {

  //console.log(import.meta.env)
  
  const env = loadEnv(mode, process.cwd())
  console.log(env)
  const viteEnv = wrapperEnv(env);
  console.log(viteEnv)
  
  
  return {
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        // 起个别名，在引用资源时，可以用‘@/资源路径'直接访问
        '@': fileURLToPath(new URL('./src', import.meta.url))
      },
    },
    server: {
      host: '0.0.0.0', // url地址,监听所有网络接口
      port: viteEnv.VITE_PORT, // 指定端口号
      open: viteEnv.VITE_OPEN  // 启动后自动打开浏览器
    },
  }
})

总结

到此这篇关于vue3+js Vite多环境端口配置以及@别名设置的一次尝试过程的文章就介绍到这了,更多相关vue3+js Vite多环境端口配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3项目vite.config.js配置代理、端口、打包名以及图片压缩