书架

书架

=一个知识书库=

vite配置-打包配置

vite配置-打包配置

## 1. 分包 修改`vite.config.ts` * 通过`() => import()`形式加载的组件会自动分包 * 第三方插件需手动分包 ```js build: { rollupOptions: { output: { manualChunks: { vue: ['vue', 'pinia', 'vue-router'], elementIcons: ['@element-plus/icons-vue'], },
more...
vite配置-代码统一规范

vite配置-代码统一规范

> - Eslint: JavaScript 语法规则和代码风格检查; > - Prettier:全局代码格式化; > - Stylelint: CSS 统一规范和代码检测。 eslint9.x,与以往版本的配置写法不同 <!--more--> ## 一、eslint8.x版本 ### 1. 安装 ```bash //eslint 安装 npm install eslint@^8.39.0 -D //eslint vue插件安装 npm install eslint-plugin-vue@^9.11.0 -D //eslint 识别ts语法
more...
vite配置-代码统一规范进阶

vite配置-代码统一规范进阶

> 通过ESLint 检测 JS/TS 代码、**Prettier**格式化代码、Stylelint 检测 CSS/SCSS 代码和配置 EditorConfig 来全方位约束和统一前端代码规范。 > > - Eslint: JavaScript 语法规则和代码风格检查; > - Prettier:全局代码格式化。 > - Stylelint: CSS 统一规范和代码检测; <!--more--> ### ESLint 代码检测 [ESLint](http://eslint.cn/) 可组装的JavaScript和JSX检查工具,目标是保证代码的一致性和避免错误。
more...
vite配置-反向代理解决跨域

vite配置-反向代理解决跨域

## 跨域原理 浏览器同源策略: 协议、域名和端口都相同是同源,浏览器会限制非同源请求读取响应结果。 本地开发环境通过 `Vite` 配置反向代理解决浏览器跨域问题,生产环境则是通过 `nginx` 配置反向代理 。 <!--more--> ## `vite.config.ts` 配置代理 ```javascript // 写法1 export default defineConfig(({ mode }: ConfigEnv): UserConfig => { const env = loadEnv(mode, process.cwd())
more...
vite配置-国际化

vite配置-国际化

> 国际化分为两个部分: > > * Element Plus 框架国际化(官方提供了国际化方式) > * 自定义国际化(通过 vue-i18n 国际化插件) <!--more--> ## Element Plus 国际化 > 简单的使用方式请参考 [Element Plus 官方文档-国际化示例](https://element-plus.gitee.io/zh-CN/guide/i18n.html#configprovider) 以下介绍整合 `pinia` 实现国际化语言切换。 ### ConfigProvider全局配置国际化设置 Elemen
more...