package.json文件变更( 二 )


vite的去除方式
npm uninstall core-jsnpm uninstall babel-plugin-importnpm uninstall babel-plugin-transform-remove-console
vite..js中添加配置
{build:{terserOptions: {compress: {//生产环境时移除consoledrop_console: true,drop_debugger: true}},esbuild: {//移除方式2drop: mode === 'production' ? ['console', 'debugger'] : []},}}
配置运行的时候自动检测规范
npm i vite-plugin-eslint
vite..ts添加配置
plugins: [eslintPlugin({include: ["src/**/*.ts", "src/**/*.vue"]})]
项目中文件的变更 i18n.ts:139 :is not
Vite默认使用es6标准的的导入方式,不支持引入 。默认有Vite自己的引入方式
静态资源的引入还比较好解决,可以使用new URL(),但是文件批量引入时的问题有效的解决方案:
@vue/cli 的批量文件引入方案
const folderRequireContext: __WebpackModuleApi.RequireContext =require.context("../router",true,/[/\\]route[/\\]([a-z]{2})_?([A-Z]{2})?\.ts$/);
vite 批量文件引入方案
懒加载方式,使用的时候才加载:
const fileRequireContext = import.meta.glob("../router/*.ts");fileRequireContext[fileFullName]().then((content: any) => {console.log(content.default)})
直接加载方式:
const fileRequireContext = import.meta.globEager("../router/*.ts");Object.keys(fileRequireContext).forEach((fileFullName) => {const content=fileRequireContext[fileFullName];})
因为.meta无法使用表达式,所以看了一下其它匹配的方式:
上不存在属性 "glob" 的错误
使用.meta.glob时,报以上错误,在.json文件中添加配置
{"compilerOptions": {"types": ["vite/client"],},}
环境变量的使用 @vue/cli获取环境变量的方式
process.env.NODE_ENV
vite获取环境变量的方式
import.meta.env.PROD
:call stack size
路由的默认配置问题,发现这个问题主要是因为路由配置的跳转什么的出现了问题,本人是因为框架路由跳转子路由时导致的该问题:
router.push("/dashboard")//菜单栏框架router.push("/about")//内容区展示的路由
因为上述问题导致的,about 是的子路由,所以删除子路由about的跳转后,该问题消失,但是如何在跳转到子路由,在路由的子路由添加默认子路由跳转:
{path: "/",redirect: "/about",//设置home路径的默认展示页面}
还有注意一下,路由是不是正确配置了,在实践过程中还有一个情况会导致该问题,是因为.meta批量文件懒加载导致路由数组为空,因为404路由都没有,所以导致上述问题!!!
配置问题
之前都是默认生成问题,但是在vite中需要自己配置
@vue/cli中配置文件..js
module.exports = {root: true,env: {es2021: true},extends: ["eslint:recommended","plugin:vue/vue3-essential","@vue/typescript/recommended","@vue/prettier","plugin:prettier/recommended"],// parserOptions: {//ecmaVersion: 2020 rome// },rules: {"no-console": process.env.NODE_ENV === "production" ? "warn" : "off","no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off","prettier/prettier": "off",// "@typescript-eslint/explicit-module-boundary-types": "off","@typescript-eslint/no-explicit-any": "off",// "@typescript-eslint/no-array-constructor":"off","@typescript-eslint/no-empty-function": "warn","@typescript-eslint/no-unused-vars": "off","@typescript-eslint/no-unused-requires": "off",// "@typescript-eslint/ban-types": "off",// "vue/no-unused-components":"off","vue/multi-word-component-names": "off", //vue文件命名// "no-array-constructor": "off",// "no-irregular-whitespace": "off","vue/no-unused-vars": "off",// 'prefer-const': 'off',"linebreak-style": [0, "error", "windows"]},overrides: [{files: ["**/__tests__/*.{j,t}s?(x)","**/tests/unit/**/*.spec.{j,t}s?(x)"],env: {jest: true}}]};