开发环境:
Node:v18.19.0
npm:10.2.3
cnpm:@9.4.0
vite:2.9.17
项目打包后
进入打包后的文件夹,运行cmd,输入下方命令行,开启一个服务,方能跑起项目
http-server -p 80
全局安装vite版本2.9.17
npm install -g vite@2.9.17
npm install -g vue@2.7.16
npm install -g http-server
项目为什么要选择Vite2?
Vite 2:
跨框架支持:与 Vite 1 主要基于 Vue 项目不同,Vite 2 实现了跨框架的支持,可以很好地与 Vue 2、Vue 3 和 React 等前端框架配合使用。
性能优化:在构建速度和开发体验上进行了进一步的优化,提高了项目的开发效率。
Vite 3:
模板变更:Vite 3 在项目模板上进行了更新,提供了更加现代化和高效的模板选项,使得开发者能够更快速地开始新的项目。
CLI 优化:Vite 3 对其命令行界面(CLI)进行了优化,提供了更加直观和友好的用户体验。
API 变化:例如 import.meta.glob API 可能在 Vite 3 中有所变化,以适应新的项目需求和使用场景。
Vite 4:
Rollup 3 升级:Vite 4 的主要目标是升级到 Rollup 3,这将带来一系列的性能提升和新特性。Rollup 是一个模块打包器,它按照 ES6 模块规范将小块代码编译成大块复杂的代码,用于浏览器或 Node.js 中运行。
核心代码库调整:Vite 4 可能会从 Vite core monorepo 中移出一些功能或插件,以更加清晰地组织和管理代码库。
React 支持:Vite 4 为 React 项目提供了更好的支持,可能包括两个针对不同 React 项目的插件。
CSS 处理变化:在 Vite 4 中,.css 文件的默认导出可能会被弃用,这可能会影响开发者处理 CSS 的方式。
开发注意事项
【1】关于多语言版本,无论是哪类型用户办完业务,退出后,在退出功能里需要把localStorage.removeItem('lang')。
多语言版本(i18n)
1:使用Vscode编辑器安装插件i18n Ally,在项目中会自动生成.vscode文件夹,里面配置如下:
"i18n-ally.localesPaths": ["src/i18n/lang"],
"i18n-ally.keystyle": "nested", // 翻译路径格式,
"i18n-ally.sortKeys": true, // 在多语言文件中自动排序键
"i18n-ally.namespace": false, // 不使用命名空间
"i18n-ally.sourceLanguage": "zh-CN", // 源语言设置为中文
"i18n-ally.displayLanguage": "zh-CN", //显示语言, 这里也可以设置显示英文为en
"i18n-ally.enabledParsers": ["json"],
"i18n-ally.enabledFrameworks": ["vue"],
"i18n-ally.translate.engines": ["deepl","google-cn", "google","libretranslate"], // 翻译器
"i18n-ally.extract.keygenStyle": "camelCase", // 翻译字段命名样式采用驼峰
"i18n-ally.extract.autoDetect": false, // 自动检测代码中的字符串以进行提取
2:重启Vscode编辑器
3:选中需要翻译的汉字, 在编辑器代码列中出现灯泡图标,点击就会弹出选项中选择,提取文本到 i18n 配置中;
4:此时会把中文提取到zh-CN.json
5:项目中所有文本提取完成后,请打开梯子
6:点击Vscode编辑器最左边(安装完i18n-ally就会出现【A文】的图标),点进去找到【翻译树】,鼠标放到【翻译树】会出现【地球图标】,点击【地球图标】就能自动生成文案。