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

82
.prettierrc.cjs
View File

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

215
vite.config.ts
View File

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