更多配置参考：https://vitejs.dev
vite.config.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import { defineConfig } from "vite" const fs = require("fs") const path = require("path") // Dotenv 是一个零依赖的模块，它能将环境变量中的变量从 .env 文件加载到 process.env 中 const dotenv = require("dotenv") const envFiles = [ /** default file */ `.env`, /** mode file */ `.env.${process.env.NODE_ENV}` ] for (const file of envFiles) { const envConfig = dotenv.parse(fs.readFileSync(file)) for (const k in envConfig) { process.env[k] = envConfig[k] } } export default defineConfig({ define: { 'process.env': process.env }, // 开发或生产环境服务的公共基础路径 base: './', // 作为静态资源服务的文件夹 publicDir: 'assets', plugins: [vue(), vueJsx()], resolve: { // 文件系统路径的别名 alias: { '@': path.resolve(__dirname, 'src'), 'vue': 'vue/dist/vue.esm-bundler.js', 'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' } }, css: { preprocessorOptions: { scss: { additionalData: '@import "./src/assets/style/index.scss";' } } }, build: { // 压缩 minify: process.env.VITE_NODE_ENV === 'production' ? 'esbuild' : false, // 服务端渲染 ssr: false, outDir: 'dist', chunkSizeWarningLimit: 2000, emptyOutDir: true, rollupOptions: { output: { manualChunks(id) { if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0].toString() } } } } }, server: { host: process.env.VITE_HOST, port: +process.env.VITE_PORT, // 是否自动在浏览器打开 open: false, hmr: true, proxy: { '/api': { target: "http://127.0.0.1:99999", changeOrigin: true } } } }) |
.env
|
1 2 3 4 5 |
# loaded in all cases VITE_HOST = '0.0.0.0' VITE_PORT = 8080 VITE_BASE_URL = './' VITE_OUTPUT_DIR = 'dist' |
.env.development
|
1 2 3 |
# 开发环境 VITE_NODE_ENV = 'development' VITE_API_DOMAIN = '/api' |
.env.production
|
1 2 3 |
# 生产环境 VITE_NODE_ENV = 'production' VITE_API_DOMAIN = 'production.xxx.xxx' |
package.json
|
1 2 3 4 5 6 |
"scripts": { "dev": "NODE_ENV=development vite", "build-dev": "NODE_ENV=development vite build --mode development", "build-prd": "NODE_ENV=production vite build --mode production", "lint": "lint-staged ." } |
感谢分享。我的也提示“提示 NODE_ENV 不是内部或外部命令,也不是可运行程序”。这个应该是跟环境有关。 单纯的vite环境可以试试”set NODE_ENV=development&&vite”。 参考：https://blog.csdn.net/bamboozjy/article/details/110003743
请问您有区分开发模式和发布模式嘛？想问您是如何做的
使用 .env.development 和 .env.production 区分
提示 NODE_ENV 不是内部或外部命令,也不是可运行程序
1. 安装 cross-env
yarn add cross-env –dev
2. 修改script
cross-env NODE_ENV=development vite