.env 文件

在 vue3 + vite 项目中，.env类文件会在 Vite 启动一开始时被加载，而改动其内容，需要重启服务器后，才能生效。

默认情况，package.json配置：

"scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test:unit": "vitest --environment jsdom --root src/",
    "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  }

• 默认情况下，命令：npm run dev，启动开发模式development，进入开发状态，会自动加载.env、.env.local、.env.development文件，读取其中的可能存在的环境变量。
• 默认情况下，命令：npm run build，启动生成模式production，构建生成版本，会自动加载.env、.env.local、.env.production文件，读取其中的可能存在的环境变量。

若要改变加载文件，需要使用--mode参数。

package.json 配置

默认的命令，启动的.env类文件，是可以更改的。修改package.json配置中的启动命令：

"scripts": {
    "dev": "vite --mode dev",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test:unit": "vitest --environment jsdom --root src/",
    "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  }

运行命令:

npm run dev

这个命令启动开发模式，会自动加载.env、.env.local、.env.dev文件。这样就不会再加载，默认的.env.development文件。在项目根目录下，手工创建.env.dev文件。

VITE_APP_TITLE=My App
......

npx vite 命令

在 vue3 + vite 项目中，可以使用npx命令来启动 vite。

npx vite dev

开发模式

npx vite dev

# 等价命令
npx vite dev --mode development

这个命令启动开发模式，会自动加载.env、.env.local、.env.development文件。在项目根目录下，手工创建.env.development文件。

VITE_APP_TITLE=My App
......

npx vite dev --mode  dev

这个命令启动开发模式，会自动加载.env、.env.local、.env.dev文件。在项目根目录下，手工创建.env.dev文件。

VITE_APP_TITLE=My App
......

生成模式

默认命令：npm run build，与下面的命令等价：

npx vite build --mode production

这个命令启动开发模式，会自动加载.env、.env.local、.env.production文件。在项目根目录下，手工创建.env.production文件。

VITE_APP_TITLE=My App
......

npx vite build --mode pro

这个命令启动开发模式，会自动加载.env、.env.local、.env.pro文件。在项目根目录下，手工创建.env.pro文件。

VITE_APP_TITLE=My App
......

预发布

npx vite build --mode staging

这个命令启动生成模式，会自动加载.env、.env.local、.env.staging文件。在项目根目录下，手工创建.env.staging文件。

VITE_APP_TITLE=My App
......

git 配置

在 vue3 + vite 项目中，.gitignore默认配置中：

*.local

默认让 git 忽略.local文件，不会被 git 追踪，也不会被 git 上传到 Git 服务器。自己可以修改.gitignore配置，设置 git 忽略文件。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com