vite搭建vue3开发环境
vue3生态pinia vue-router element-plu sass axios pinia
项目代码规范配置Eslint Prettier Editorconfig
Git提交规范Commitizen Husky lint-staged
添加基本依赖
创建vue项目
npm/pnpm create vue@latest
勾选 vue-router pinia Eslint Prettier
or pnpm add vue-router pinia
直接使用 vue-router pinia
假如没有勾选eslint和prettier
pnpm add eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier -D
•**eslint**: ESLint 的核心。
•**prettier**: Prettier 的核心。
•**eslint-plugin-vue**: ESLint 的 Vue.js 插件，专门检查.vue文件。
•**eslint-config-prettier**: 关掉那些跟 Prettier 冲突的 ESLint 规则。
•**eslint-plugin-prettier**: 让 Prettier 变成 ESLint 的一部分，这样代码不符合 Prettier 的格式，ESLint 就会提醒你。
# 2. 配置 ESLint
创建一个.eslintrc.js文件
.eslintrc.js
module.exports ={
env:{
browser:true,//浏览器环境
es2021:true,//支持 ES2021 语法
node:true,// Node.js 环境
},
extends:[
"eslint:recommended",//ESLint 推荐规则
"plugin:vue/vue3-essential",//Vue3 基础规则
"plugin:prettier/recommended",// Prettier 推荐规则(搞定上面那两个包)
],
parserOptions:{
ecmaVersion:"latest",//用最新的ECMAScript 版本
sourceType:"module",//模块类型
},
plugins:["vue"],// 启用 Vue 插件
rules: {
// 你自己的规则
"indent":["error",2,{ SwitchCase:1}],//缩进:2 个空格,switch-case 缩进 1 格
"quotes":["error","double"],// 字符串:双引号
"semi":["error","always"],// 语句结尾:分号
"vue/multi-word-component-names":"off",//关闭组件名称多单词检査(看情况开启)
"no-unused-vars":"off",
//暂时关闭"未使用的变量检查"
"no-empty":["error",{ allowEmptyCatch:true }], // 允许空的 catch 块
//其规则.
},
overrides:[{
files:["src/**/*.vue"], //指定vue文件
rules :{
"vue/multi-word-component-names":"off"//对于vue文件,关闭多单词命名检査
}
}]
};
**配置说明：**
•env: 项目环境配置。
•extends引入配置好的规则
•eslint:recommended： ESLint 的推荐配置。
•plugin:vue/vue3-essential： Vue3 项目基本规则配置。
•plugin:prettier/recommended： 一步到位，启用eslint-plugin-prettier，并将不符合Prettier格式的地方作为 ESLint 错误，禁用冲突规则。
•parserOptions
•ecmaVersion： ECMAScript 版本，"latest"表示最新版。
•sourceType："module"表示使用 ES 模块。
•plugins:
•"vue"表示启用eslint-plugin-vue.
•**rules**: 这里可以写你自己的规则，或者修改上面引入的规则。
•indent:缩进。
•quotes: 引号相关规则。
•semi:分号相关规则。
•vue/multi-word-component-names: vue 文件命名。
•no-unused-vars：未使用的变量
•no-empty:空代码块**。**
**3. 配置 Prettier**
创建一个.prettierrc.json文件：
{
"useTabs": false,
"tabWidth": 2,
"jsxSingleQuote": false,
"singleQuote": false,
'endOfLine":"lf""semi": true."trailingComma": "es5"
}
**配置解释：**
•useTabs：是否使用tab
•tabWidth： 缩进空格数
•jsxSingleQuote和singleQuote: jsx 和 js 都用双引号。
•endOfLine: 换行
•semi： 语句结尾是否加分号
•trailingComma: 多行的时候，结尾是否加逗号
## 3.vscode安装ESLint 和 Prettier 扩展
{
"editor.defaultFormatter": "esbenp.prettier-vscode"， // 默认格式化工具
'editor.formatOnSave":true，//保存时自动格式化
"editor.codeActionsOnSave": {
"source.organizeImports": true， //保存的时候自动优化导入
"source.fixAll": true // 自动修复所有问题
}
}
•"editor.defaultFormatter"：把Prettier扩展设置成默认的。
•"editor.formatOnSave"：打钩保存自动格式化
•source.organizeImports: 自动优化 import。
•"source.fixAll"：自动修复。
**5. 忽略文件（可选）**
创建.eslintignore和.prettierignore文件 内容基本一样
node_modules
dist
public*.md
*.yml
...
项目启动和打包的时候也自动检查代码，可以装一个vite-plugin-eslint插件：
pnpm add vite-plugin-eslint -D
// vite.config.js
import {
defineconfig,
loadEnv
} from "vite";
import eslint from "vite-plugin-eslint";
export default defineconfig(({
mode
}) => {
const env = loadEnv(mode, process.cwd());
return {
plugins: [
eslint({
lintOnStart: true, // 项目启动时检査cache: false//关闭缓存
}),
],
esbuild: {
//根据.env配置，发布的时候去除console 和debugger
drop: env.VITE_DROP_CONSOLE === "true" ? ["console", "debugger"] : [],
},
};
});
pnpm add -D postcss autoprefixer cssnano postcss-preset-env
创建`postcss.config.cjs`文件
module.exports = {
plugins: [
// 使用 require + 选项配置
require('postcss-preset-env')({
stage: 3,
features: {
'nesting-rules': true
}
}),
require('autoprefixer'),
// 生产环境启用 cssnano
process.env.NODE_ENV === 'production'
? require('cssnano')({ preset: 'default' })
: false
].filter(Boolean) // 过滤 false 值
}
创建.browserslistrc
> 0.2%
last 2 versions
not dead
安装sass
pnpm add -D sass
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/_variables.scss";`
}
}
}
配置src别名
pnpm i @types/node --save-dev
在vite.config.ts 设置全局scss
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
}
}
gzip 压缩
npm install vite-plugin-compression --save-dev
vite.config.js配置插件配置项
import viteCompression from 'vite-plugin-compression';
export default defineConfig({
plugins: [
viteCompression({
algorithm: 'gzip', // 使用 gzip 压缩
ext: '.gz', // 生成的文件扩展名
threshold: 10240, // 仅压缩大于 10KB 的文件
deleteOriginFile: false, // 是否删除原始文件
compressionOptions: { level: 9 }, // 压缩级别，1-9，越高压缩率越大
filter: /.(js|css|json|html|ico|svg)(?.*)?$/i, // 过滤文件类型
}),
],
});
pnpm add rollup-plugin-terser --dev
drop_console: true表示在压缩过程中会删除所有的 console.*函数调用
import { terser } from "rollup-plugin-terser";
export default defineConfig({
// ...其他配置
build: {
rollupOptions: {
plugins: [
terser({
compress: {
drop_console: true, // 这会删除 console.* 函数的调用
},
}),
],
},
},
});
vite.config.ts 配置说明
root: process.cwd(), // 项目根目录（index.html 文件所在的位置）,
base: '/', // 开发或生产环境服务的公共基础路径 配置引入相对路径
mode: 'development', // 模式
plugins: [vue()], // 需要用到的插件数组
publicDir: 'public', // 静态资源服务的文件夹
cacheDir: 'node_modules/.vite', // 存储缓存文件的目录
resolve: {
alias: [ // 文件系统路径别名
{
find: /\/@\//,
replacement: pathResolve('src') + '/'
}
],
dedupe: [], // 强制 Vite 始终将列出的依赖项解析为同一副本
conditions: [], // 解决程序包中 情景导出 时的其他允许条件
mainFields: [], // 解析包入口点尝试的字段列表
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 导入时想要忽略的扩展名列表
preserveSymlinks: false, // 启用此选项会使 Vite 通过原始文件路径确定文件身份
},
css: {
modules: {
scopeBehaviour: 'global' | 'local',
// ...
},
postcss: '', // 内联的 PostCSS 配置 如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源
preprocessorOptions: { // css的预处理器选项
scss: {
additionalData: `$injectedColor: orange;`
}
}
},
json: {
namedExports: true, // 是否支持从.json文件中进行按名导入
stringify: false, // 开启此项，导入的 JSON 会被转换为 export default JSON.parse("...") 会禁用按名导入
},
esbuild: { // 最常见的用例是自定义 JSX
jsxFactory: 'h',
jsxFragment: 'Fragment'
},
assetsInclude: ['**/*.gltf'], // 指定额外的 picomatch 模式 作为静态资源处理
logLevel: 'info', // 调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent'
clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
envDir: '/', // 用于加载 .env 文件的目录
envPrefix: [], // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中
server: {
host: '127.0.0.1', // 指定服务器应该监听哪个 IP 地址
port: 5000, // 指定开发服务器端口
strictPort: true, // 若端口已被占用则会直接退出
https: false, // 启用 TLS + HTTP/2
open: true, // 启动时自动在浏览器中打开应用程序
proxy: { // 配置自定义代理规则
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
},
cors: true, // 配置 CORS
force: true, // 强制使依赖预构建
hmr: { // 禁用或配置 HMR 连接
// ...
},
watch: { // 传递给 chokidar 的文件系统监听器选项
// ...
},
middlewareMode: '', // 以中间件模式创建 Vite 服务器
fs: {
strict: true, // 限制为工作区 root 路径以外的文件的访问
allow: [], // 限制哪些文件可以通过 /@fs/ 路径提供服务
deny: ['.env', '.env.*', '*.{pem,crt}'], // 用于限制 Vite 开发服务器提供敏感文件的黑名单
},
origin: 'http://127.0.0.1:8080/', // 用于定义开发调试阶段生成资产的 origin
},
build: {
target: ['modules'], // 设置最终构建的浏览器兼容目标
polyfillModulePreload: true, // 是否自动注入 module preload 的 polyfill
outDir: 'dist', // 指定输出路径
assetsDir: 'assets', // 指定生成静态文件目录
assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
cssCodeSplit: true, // 启用 CSS 代码拆分
cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
sourcemap: false, // 构建后是否生成 source map 文件
rollupOptions: {}, // 自定义底层的 Rollup 打包配置
lib: {}, // 构建为库
manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
ssr: undefined, // 生成面向 SSR 的构建
minify: 'esbuild', // 指定使用哪种混淆器
terserOptions: {}, // 传递给 Terser 的更多 minify 选项
write: true, // 启用将构建后的文件写入磁盘
emptyOutDir: true, // 构建时清空该目录
brotliSize: true, // 启用 brotli 压缩大小报告
chunkSizeWarningLimit: 500, // chunk 大小警告的限制
watch: null, // 设置为 {} 则会启用 rollup 的监听器
},
preview: {
port: 5000, // 指定开发服务器端口
strictPort: true, // 若端口已被占用则会直接退出
https: false, // 启用 TLS + HTTP/2
open: true, // 启动时自动在浏览器中打开应用程序
proxy: { // 配置自定义代理规则
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
},
cors: true, // 配置 CORS
},
optimizeDeps: {
entries: [], // 指定自定义条目——该值需要遵循 fast-glob 模式
exclude: [], // 在预构建中强制排除的依赖项
include: [], // 可强制预构建链接的包
keepNames: false, // true 可以在函数和类上保留 name 属性
},
ssr: {
external: [], // 列出的是要为 SSR 强制外部化的依赖,
noExternal: '', // 列出的是防止被 SSR 外部化依赖项
target: 'node', // SSR 服务器的构建目标
}
}
