使用vite从头搭建一个vue3项目（三）vite.config.js配置
可达鸭头上站青蛙 2024-07-03 11:05:03 阅读 50
目录
一、声明环境变量配置文件二、vite.config.js基础配置1、defineConfig()、loadEnv()2、plugins配置项3、server配置项4、resolve配置项5、css配置项6、build配置项
三、vite.config.js配置完整代码
VITE版本：<code>v5.2.8
一、声明环境变量配置文件
在根目录下新建文件 .env.development以及 .env.production环境变量配置文件。
# 开发环境
VITE_MODE='development'code>
## 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_BASE_API = 'https://vitejs.dev.cn/'
# 生产环境
VITE_MODE='production'code>
## 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_BASE_API = 'https://vitejs.prod.cn/'
若是有其他环境需求，也可以根据以上格式创建。
如 test 环境： .env.test
# 测试环境
VITE_MODE='test'code>
## 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_BASE_API = 'https://vitejs.test.cn/'
二、vite.config.js基础配置
1、defineConfig()、loadEnv()
defineConfig() 工具函数默认支持 ts 的类型提示。
defineConfig() 可以接收一个配置对象{}为参数，也可以接收一个函数()=>{}为参数；当接收一个函数为参数时，函数的参数为一个条件对象。如下：
import { defineConfig, loadEnv } from 'vite'
// https://vitejs.dev/config/
export default defineConfig((conditionalConfig) => {
console.log(conditionalConfig);
console.log(process.cwd(), __dirname);
console.log(process.cwd() === __dirname);
const { mode, command, isSsrBuild, isPreview } = conditionalConfig; // conditionalConfig对象包含4个字段
const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
console.log(env);
return {
root: process.cwd(), // 项目根目录（index.html 文件所在的位置）
base: env.VITE_MODE === 'production' ? './' : '/', // 开发或生产环境服务的公共基础路径。
};
})
打印内容如下图：
其中 conditionalConfig 对象包含 4 个字段，字段具体意义请参考：https://cn.vitejs.dev/config/。
<code>__dirname和process.cwd() 都是用于获取文件系统路径的全局变量和方法，但它们有不同的含义和用途。
process.cwd() 是一个方法，用于获取 Node.js 进程的当前工作目录。它返回的是 Node.js 进程启动时所在的工作目录的绝对路径。这个路径通常是在启动 Node.js 应用程序时指定的，或者是在命令行中运行 Node.js 时的当前目录。
__dirname 是一个特殊的全局变量，用于获取当前模块的目录名。它返回的是包含当前模块文件目录的绝对路径。这个路径是相对于当前模块文件的位置的，所以它的值在不同模块中可能不同。
我的理解是 process.cwd()是在启动项目时动态获取的，__dirname则是根据当前文件的目录结构决定的。
loadEnv(mode, __dirname) 根据 mode 参数判断当前运行时环境，以获取不同环境配置的环境变量。
上面是一个 development 服务环境，比方说我们要连接 test 环境该如何操作：
package.json 文件的 scripts 对象中添加 test 启动项。
"scripts": {
"dev": "vite",
"test": "vite --mode test", // 添加此项
"build": "vite build",
"preview": "vite preview"
},
这种 vite --mode test 方式属于 vite 命令行，详情请参考：https://cn.vitejs.dev/guide/cli.html启动项目 npm run test，这时候在控制台查看打印项，如下：
2、plugins配置项
<code>import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
return {
plugins:[vue()] // 默认配置vue插件
};
})
默认配置只有 vue 插件，当你有其他需求时，需要自行导入其他插件；
比如说 vue 的开发者工具vite-plugin-vue-devtools，还有按需自动导入 API 组件插件 unplugin-auto-import。
安装插件：
npm add -D vite-plugin-vue-devtools
npm add -D unplugin-auto-import
# npm install 等价于 npm i 等价于 npm add
# --save-dev 等价于 -D
# --save 可省略
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools';
import AutoImport from 'unplugin-auto-import/vite' // 导入按需自动加载API插件
// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
return {
plugins:[
VueDevTools(),
vue(), // 默认配置vue插件
AutoImport({ imports: ["vue", "vue-router"] }), // 配置vue、vue-router的API自动加载
]
}
})
上面配置成功后，vue3组件中就不需要再手动书写 import 语句引入 vue3 API，可直接在页面中书写 vue3 API，并且控制台不会报错，不会影响页面渲染。
<script setup>
const count = ref("123")
</script>
不使用插件则控制台报错，页面也无法渲染：
3、server配置项
<code>import { defineConfig, loadEnv } from 'vite'
// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
return {
server:{
host: '0.0.0.0', // 指定服务器应该监听哪个 IP 地址，默认localhost，可设置为'0.0.0.0'或 true
port: 9527, // 端口号，默认5173
open: true, // 开发服务器启动时，自动在浏览器中打开应用程序
// 本地代理
proxy: {
// 简写（字符串）
'/mock': env.VITE_BASE_API,
// 带选项写法（对象）
'/api': {
target: env.VITE_BASE_API, // 从环境变量文件取值
changeOrigin: true, // 支持跨域
rewrite: (path) => path.replace(/^\/api/, ''), // 路径重写
},
// 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
'/socket.io': {
target: 'ws://localhost:5174',
// 支持 websocket
ws: true,
},
}
}
}
})
server 中的 host 默认值是 localhost，此时启动项目，只会监听本地服务。
如果将此设置为 <code>'0.0.0.0' 或者 true 将监听所有地址，包括局域网和公网地址。此设置可以让同一局域网下的其他电脑访问本机 url 地址。
4、resolve配置项
<code>import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import { fileURLToPath, URL } from 'node:url'
// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
return {
resolve:{
alias: {
// 第一种方式（最简洁）
'@': path.resolve(__dirname, './src'),
// 第二种方式
'@style': fileURLToPath(new URL('./src/assets/style', import.meta.url)),
'@images': fileURLToPath(new URL('./src/assets/images', import.meta.url)),
},
// 导入时想要省略的扩展名列表。 vite官方不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。
extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
}
}
})
上面两种设置别名的方式都会生成一个绝对路径，如：
console.log(path.resolve(__dirname, './src'));
// F:\web\03_Vue\vite-vue3-project-js\src
console.log(fileURLToPath(new URL('./src/assets/style', import.meta.url)));
// F:\web\03_Vue\vite-vue3-project-js\src\assets\style
alias 还有另一种以数组配置的形式：
resolve:{
alias: [
{
find: '@',
replacement: path.resolve(__dirname, './src')
}
]
}
5、css配置项
由于 Vite 的目标仅为现代浏览器，因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如postcss-nesting）来编写简单的、符合未来标准的 CSS。
话虽如此，但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖。
# .scss and .sass
npm add -D sass
# .less
npm add -D less
# .styl and .stylus
npm add -D stylus
Vite 通过 postcss-import 预配置支持了 CSS @import 内联，在 CSS 文件中可以直接使用 @import 导入其他样式文件。
如果需要额外的 CSS 配置，请自行定义，比方说自动添加 CSS3 前缀插件 autoprefixer 和将 px 值转换成 rem 值插件 postcss-pxtorem。
npm i autoprefixer # 自动添加 CSS3 前缀
npm i -D postcss-pxtorem# 将 px 值转换成 rem 值，使得页面更好地适配不同大小的设备
postcss 插件配置：
import { defineConfig, loadEnv } from 'vite'
import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'
// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
return {
css:{
devSourcemap: true, // 可以查看 CSS 的源码
postcss: {
plugins: [
postCssPxToRem({
rootValue: 16, // 1rem的大小
propList: ['*'], // 需要转换的属性，*代表全部转换
}),
autoprefixer({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
],
})
]
}
}
}
})
6、build配置项
import { defineConfig, loadEnv } from 'vite'
// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
return {
build:{
outDir: "dist", // 默认dist（可省略），打包后输出文件
assetsDir: "assets", // 默认assets（可省略），指定静态资源存放路径
sourcemap: false, // 默认false（可省略），是否构建sourcemap文件（生产不需要）
minify: 'terser', // 客户端默认构建是esbuild，需安装terser：`npm i -D terser`
terserOptions: {
// 生产环境移除console、debugger
compress: {
drop_console: true, // 默认false
drop_debugger: true, // 默认true
},
},
}
})
打个包试一试：npm run build
三、vite.config.js配置完整代码
<code>import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools';
import AutoImport from 'unplugin-auto-import/vite' // 按需自动加载API插件
import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, __dirname); // 加载不同环境下的环境变量
return {
root: process.cwd(), // 项目根目录（index.html 文件所在的位置）
base: env.VITE_MODE === 'production' ? './' : '/', // 开发或生产环境服务的公共基础路径。
// 插件配置
plugins: [
VueDevTools(),
vue(),
AutoImport({ imports: ["vue", "vue-router"] }),
],
// 开发服务配置
server: {
host: '0.0.0.0', // 默认localhost
port: 9527,
open: true,
proxy: {
// 简写（字符串）
'/mock': env.VITE_BASE_API,
// 带选项写法（对象）
'/api': {
target: env.VITE_BASE_API, // 从环境变量文件取值
changeOrigin: true, // 支持跨域
rewrite: (path) => path.replace(/^\/api/, ''), // 路径重写
},
// 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
'/socket.io': {
target: 'ws://localhost:5174',
// 支持 websocket
ws: true,
},
}
},
resolve: {
// 文件路径别名，当使用文件系统路径的别名时，请始终使用绝对路径。
alias: {
'@': path.resolve(__dirname, './src'),
'@style': path.resolve(__dirname, './src/assets/style'),
'@images': path.resolve(__dirname, './src/assets/images'),
},
// 导入时想要省略的扩展名列表。 vite官方不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。
extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
},
css: {
// 内联的 PostCSS 配置，格式同 postcss.config.js，也可以单独在根目录创建 postcss.config.js 进行配置
postcss: {
plugins: [
postCssPxToRem({
rootValue: 16, // 1rem的大小
propList: ['*'], // 需要转换的属性，*代表全部转换
}),
autoprefixer({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
],
}),
]
},
},
build: {
outDir: "dist", // 默认dist，打包后输出文件
assetsDir: "assets", // 默认assets，指定静态资源存放路径
sourcemap: false, // 默认false，是否构建sourcemap文件（生产不需要）
minify: 'terser', // vite默认构建是esbuild,需安装terser npm i -D terser
terserOptions: {
// 生产环境移除console、debugger
compress: {
drop_console: true, // 默认false
drop_debugger: true, // 默认true
},
},
}
}
})
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。