attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: vite server配置

Browse Source
This commit is contained in:
wf 2024-04-24 13:02:25 +08:00
parent deb7b58ba7
commit 728d0a82de
4 changed files with 228 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
.eslintrc.cjs
View File

@ -1,75 +1,75 @@
module.exports = { module.exports = {
// 运行环境 // 运行环境
env: { env: {
browser: true, browser: true,
es2021: true, es2021: true,
node: true // 配置后便会启用浏览器和 Node.js 环境，这两个环境中的一些全局变量(如 window 、 global 等)会同时启用。 node: true // 配置后便会启用浏览器和 Node.js 环境，这两个环境中的一些全局变量(如 window 、 global 等)会同时启用。
}, },
// 指定如何解析语法 解析 .vue 文件 // 指定如何解析语法 解析 .vue 文件
parser: "vue-eslint-parser", parser: "vue-eslint-parser",
// 解析器选项 // 解析器选项
parserOptions: { parserOptions: {
ecmaVersion: "latest", // 可以配置 ES + 数字(如 ES6)或者 ES + 年份 (如 ES2015)，也可以直接配置为 latest ，启用最新的 ES 语法 ecmaVersion: "latest", // 可以配置 ES + 数字(如 ES6)或者 ES + 年份 (如 ES2015)，也可以直接配置为 latest ，启用最新的 ES 语法
parser: "@typescript-eslint/parser", // ts解析，将ts转换为estree格式，在eslint下通过Espree进行检查 parser: "@typescript-eslint/parser", // ts解析，将ts转换为estree格式，在eslint下通过Espree进行检查
sourceType: "module" // 默认为 script ，如果使用 ES Module 则应设置为 module sourceType: "module" // 默认为 script ，如果使用 ES Module 则应设置为 module
}, },
// 继承配置 // 继承配置
extends: [ extends: [
"./.eslintrc-auto-import.json", // 与vite.config.ts中的filepath路径一致 "./.eslintrc-auto-import.json", // 与vite.config.ts中的filepath路径一致
"plugin:vue/vue3-recommended", "plugin:vue/vue3-recommended",
"plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended",
"prettier", "prettier",
"plugin:prettier/recommended" // prettier配置要写在eslint配置后面 "plugin:prettier/recommended" // prettier配置要写在eslint配置后面
], ],
// ESLint插件系统 // ESLint插件系统
// 添加插件后只是拓展了 ESLint 本身的规则集，但 ESLint 默认并没有开启这些规则的校验，需要在rules进行配置要开启或者调整这些规则 // 添加插件后只是拓展了 ESLint 本身的规则集，但 ESLint 默认并没有开启这些规则的校验，需要在rules进行配置要开启或者调整这些规则
plugins: [ plugins: [
"@typescript-eslint", // 拓展一些关于 TS 代码的规则 "@typescript-eslint", // 拓展一些关于 TS 代码的规则
"vue", "vue",
// 2. 加入 prettier 的 eslint 插件 // 2. 加入 prettier 的 eslint 插件
"prettier" "prettier"
], ],
/** /**
* key 为规则名，value 配置内容，数组第一项为规则的ID ，第二项为规则的配置 * key 为规则名，value 配置内容，数组第一项为规则的ID ，第二项为规则的配置
* "off" 或 0 ==> 关闭规则 * "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行） * "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
* "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错） * "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）
*/ */
rules: { rules: {
// 配置： // 配置：
// eslint (http://eslint.cn/docs/rules) // eslint (http://eslint.cn/docs/rules)
"no-var": "error", // 要求使用 let 或 const 而不是 var "no-var": "error", // 要求使用 let 或 const 而不是 var
"no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行 "no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
"prefer-const": "off", // 使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const "prefer-const": "off", // 使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
"no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们 "no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们
// 3. 注意要加上这一句，开启 prettier 自动修复的功能 // 3. 注意要加上这一句，开启 prettier 自动修复的功能
"prettier/prettier": "error", "prettier/prettier": "error",
// typeScript (https://typescript-eslint.io/rules) // typeScript (https://typescript-eslint.io/rules)
"@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量 "@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量
"@typescript-eslint/no-empty-function": "error", // 禁止空函数 "@typescript-eslint/no-empty-function": "error", // 禁止空函数
"@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore "@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore
"@typescript-eslint/ban-ts-comment": "error", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述 "@typescript-eslint/ban-ts-comment": "error", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
"@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长 "@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长
"@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间 "@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间
"@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型 "@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型
"@typescript-eslint/ban-types": "off", // 禁止使用特定类型 "@typescript-eslint/ban-types": "off", // 禁止使用特定类型
"@typescript-eslint/no-var-requires": "off", // 允许使用 require() 函数导入模块 "@typescript-eslint/no-var-requires": "off", // 允许使用 require() 函数导入模块
"@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!) "@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!)
// vue (https://eslint.vuejs.org/rules) // vue (https://eslint.vuejs.org/rules)
"vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该 no-unused-vars 规则时有效 "vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该 no-unused-vars 规则时有效
"vue/v-slot-style": "error", // 强制执行 v-slot 指令样式 "vue/v-slot-style": "error", // 强制执行 v-slot 指令样式
"vue/no-mutating-props": "error", // 不允许改变组件 prop "vue/no-mutating-props": "error", // 不允许改变组件 prop
"vue/custom-event-name-casing": "error", // 为自定义事件名称强制使用特定大小写 "vue/custom-event-name-casing": "error", // 为自定义事件名称强制使用特定大小写
"vue/html-closing-bracket-newline": "error", // 在标签的右括号之前要求或禁止换行 "vue/html-closing-bracket-newline": "error", // 在标签的右括号之前要求或禁止换行
"vue/attribute-hyphenation": "error", // 对模板中的自定义组件强制执行属性命名样式：my-prop="prop" "vue/attribute-hyphenation": "error", // 对模板中的自定义组件强制执行属性命名样式：my-prop="prop"
"vue/attributes-order": "off", // vue api使用顺序，强制执行属性顺序 "vue/attributes-order": "off", // vue api使用顺序，强制执行属性顺序
"vue/no-v-html": "off", // 禁止使用 v-html "vue/no-v-html": "off", // 禁止使用 v-html
"vue/require-default-prop": "off", // 此规则要求为每个 prop 为必填时，必须提供默认值 "vue/require-default-prop": "off", // 此规则要求为每个 prop 为必填时，必须提供默认值
"vue/multi-word-component-names": "off", // 要求组件名称始终为 “-” 链接的单词 "vue/multi-word-component-names": "off", // 要求组件名称始终为 “-” 链接的单词
"vue/no-setup-props-destructure": "off" // 禁止解构 props 传递给 setup "vue/no-setup-props-destructure": "off" // 禁止解构 props 传递给 setup
} }
}; };

82
.prettierrc.cjs
View File

@ -1,41 +1,41 @@
// @see: https://www.prettier.cn // @see: https://www.prettier.cn
module.exports = { module.exports = {
// 指定最大换行长度 // 指定最大换行长度
printWidth: 130, printWidth: 130,
// 缩进制表符宽度 | 空格数 // 缩进制表符宽度 | 空格数
tabWidth: 2, tabWidth: 2,
// 使用制表符而不是空格缩进行 (true：制表符，false：空格) // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
useTabs: false, useTabs: false,
// 结尾不用分号 (true：有，false：没有) // 结尾不用分号 (true：有，false：没有)
semi: true, semi: true,
// 使用单引号 (true：单引号，false：双引号) // 使用单引号 (true：单引号，false：双引号)
singleQuote: false, singleQuote: false,
// 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>" // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
quoteProps: "as-needed", quoteProps: "as-needed",
// 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号) // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
jsxSingleQuote: false, jsxSingleQuote: false,
// 多行时尽可能打印尾随逗号 可选值"<none|es5|all>" // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
trailingComma: "none", trailingComma: "none",
// 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有) // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
bracketSpacing: true, bracketSpacing: true,
// 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行) // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
bracketSameLine: false, bracketSameLine: false,
// (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号) // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
arrowParens: "avoid", arrowParens: "avoid",
// 指定要使用的解析器，不需要写文件开头的 @prettier // 指定要使用的解析器，不需要写文件开头的 @prettier
requirePragma: false, requirePragma: false,
// 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化 // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
insertPragma: false, insertPragma: false,
// 用于控制文本是否应该被换行以及如何进行换行 // 用于控制文本是否应该被换行以及如何进行换行
proseWrap: "preserve", proseWrap: "preserve",
// 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的 // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
htmlWhitespaceSensitivity: "css", htmlWhitespaceSensitivity: "css",
// 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式 // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
vueIndentScriptAndStyle: false, vueIndentScriptAndStyle: false,
// 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>" // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
endOfLine: "auto", endOfLine: "auto",
// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束) // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
rangeStart: 0, rangeStart: 0,
rangeEnd: Infinity, rangeEnd: Infinity,
}; };

2
src/layout/components/Header/components/Breadcrumb/index.vue
View File

@ -47,9 +47,11 @@ const onBreadcrumb = (route: RouteLocationMatched) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.main_button { .main_button {
color: $color-text-1; color: $color-text-1;
cursor: pointer;
} }
.route_button { .route_button {
color: $color-text-2; color: $color-text-2;
cursor: pointer;
&:hover { &:hover {
color: $color-primary; color: $color-primary;
} }

215
vite.config.ts
View File

@ -1,105 +1,110 @@
import { defineConfig, normalizePath, loadEnv } from "vite"; import { defineConfig, normalizePath, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue"; import vue from "@vitejs/plugin-vue";
import path from "path"; import path from "path";
import { resolve } from "path"; import { resolve } from "path";
import postcssPresetEnv from "postcss-preset-env"; import postcssPresetEnv from "postcss-preset-env";
import AutoImport from "unplugin-auto-import/vite"; import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite"; import Components from "unplugin-vue-components/vite";
import { ArcoResolver } from "unplugin-vue-components/resolvers"; import { ArcoResolver } from "unplugin-vue-components/resolvers";
import { vitePluginForArco } from "@arco-plugins/vite-vue"; import { vitePluginForArco } from "@arco-plugins/vite-vue";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
const themePath = normalizePath(path.normalize("./src/style/global-theme.scss")); const themePath = normalizePath(path.normalize("./src/style/global-theme.scss"));
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig(({ mode }) => { export default defineConfig(({ mode }) => {
// 根路径 // 根路径
const root = process.cwd(); const root = process.cwd();
// 获取跟路径对应的文件 // 获取跟路径对应的文件
const env = loadEnv(mode, root); const env = loadEnv(mode, root);
return { return {
// 开发或生产环境服务的公共基础路径 // 开发或生产环境服务的公共基础路径
base: env.VITE_PUBLIC_PATH, base: env.VITE_PUBLIC_PATH,
plugins: [ server: {
vue(), host: "0.0.0.0",
vitePluginForArco({ open: true,
style: "css" proxy: {}
}), },
createSvgIconsPlugin({ plugins: [
// 配置src下存放svg的路径，这里表示在src/icons文件夹下 vue(),
iconDirs: [path.resolve(process.cwd(), "src/icons")], vitePluginForArco({
symbolId: "icon-[dir]-[name]" style: "css"
}), }),
AutoImport({ createSvgIconsPlugin({
// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等 // 配置src下存放svg的路径，这里表示在src/icons文件夹下
imports: ["vue", "vue-router"], iconDirs: [path.resolve(process.cwd(), "src/icons")],
resolvers: [ArcoResolver()], symbolId: "icon-[dir]-[name]"
// 解决eslint报错问题 }),
eslintrc: { AutoImport({
// 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
enabled: false, imports: ["vue", "vue-router"],
filepath: "./.eslintrc-auto-import.json", // 生成的文件路径 resolvers: [ArcoResolver()],
globalsPropValue: true // 解决eslint报错问题
}, eslintrc: {
// 配置文件生成位置 // 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false
dts: "src/auto-import.d.ts" enabled: false,
}), filepath: "./.eslintrc-auto-import.json", // 生成的文件路径
Components({ globalsPropValue: true
resolvers: [ },
ArcoResolver({ // 配置文件生成位置
sideEffect: true dts: "src/auto-import.d.ts"
}) }),
], Components({
// 自动加载组件的目录配置,默认的为 'src/components' resolvers: [
dirs: ["src/components"], ArcoResolver({
// 组件的有效文件扩展名 sideEffect: true
extensions: ["vue"], })
// 配置文件生成位置 ],
dts: "src/components.d.ts" // 自动加载组件的目录配置,默认的为 'src/components'
}) dirs: ["src/components"],
], // 组件的有效文件扩展名
resolve: { extensions: ["vue"],
// 配置别名-绝对路径 // 配置文件生成位置
alias: { dts: "src/components.d.ts"
"@assets": path.join(__dirname, "src/assets"), })
"@": resolve(__dirname, "./src") ],
} resolve: {
}, // 配置别名-绝对路径
css: { alias: {
postcss: { "@assets": path.join(__dirname, "src/assets"),
plugins: [postcssPresetEnv()] "@": resolve(__dirname, "./src")
}, }
preprocessorOptions: { },
scss: { css: {
// additionalData的内容会在每个scss文件的开头自动注入 postcss: {
additionalData: `@import "${themePath}"; plugins: [postcssPresetEnv()]
` },
} preprocessorOptions: {
} scss: {
}, // additionalData的内容会在每个scss文件的开头自动注入
build: { additionalData: `@import "${themePath}";
outDir: "dist", // 指定打包路径，默认为项目根目录下的dist目录 `
minify: "esbuild", // esbuild打包更快但是不能去除console.log，terser打包慢但能去除console.log }
// minify: "terser", // Vite 2.6.x 以上需要配置 minify："terser"，terserOptions才能生效，terser可以去除 console.log }
// terserOptions: { },
// compress: { build: {
// keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题 outDir: "dist", // 指定打包路径，默认为项目根目录下的dist目录
// drop_console: true, // 生产环境去除 console minify: "esbuild", // esbuild打包更快但是不能去除console.log，terser打包慢但能去除console.log
// drop_debugger: true // 生产环境去除 debugger // minify: "terser", // Vite 2.6.x 以上需要配置 minify："terser"，terserOptions才能生效，terser可以去除 console.log
// }, // terserOptions: {
// format: { // compress: {
// comments: false // 删除注释 // keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
// } // drop_console: true, // 生产环境去除 console
// }, // drop_debugger: true // 生产环境去除 debugger
assetsInlineLimit: 4 * 1024, // 打包内联阈值4kb // },
chunkSizeWarningLimit: 2000, // 规定触发警告的 chunk 大小, 消除打包大小超过500kb警告 // format: {
// 静态资源打包到dist下的不同目录,将文件类型css、js、jpg等文件分开存储 // comments: false // 删除注释
rollupOptions: { // }
output: { // },
chunkFileNames: "static/js/[name]-[hash].js", assetsInlineLimit: 4 * 1024, // 打包内联阈值4kb
entryFileNames: "static/js/[name]-[hash].js", chunkSizeWarningLimit: 2000, // 规定触发警告的 chunk 大小, 消除打包大小超过500kb警告
assetFileNames: "static/[ext]/[name]-[hash].[ext]" // 静态资源打包到dist下的不同目录,将文件类型css、js、jpg等文件分开存储
} rollupOptions: {
} output: {
} chunkFileNames: "static/js/[name]-[hash].js",
}; entryFileNames: "static/js/[name]-[hash].js",
}); assetFileNames: "static/[ext]/[name]-[hash].[ext]"
}
}
}
};
});