Vue3 创建项目遇到的问题汇总_BigOrange

大大的周 02-07 4156

1.Uncaught SyntaxError: The requested module '/node_modules/.vite/vue-router.js?v=4b09f9b8' does not provide an export named 'default'

【解决】

vue-router的配置文件：

方案一： import * as VueRouter from 'vue-router' import routes from './routers' const router = VueRouter.createRouter({ history: VueRouter.createWebHashHistory(), routes }) 方案二： import {createRouter, createWebHashHistory} from 'vue-router' import routes from './routers' const router = createRouter({ history: createWebHashHistory(), routes }) 2. Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp.

【解决】删除了 *（星标或通配符）路由

原因：Vue Router 不再使用 path-to-regexp，而是实现了自己的解析系统，允许路由排序并实现动态路由。由于我们通常在每个项目中只添加一个通配符路由，所以支持 * 的特殊语法并没有太大的好处。参数的编码是跨路由的，无一例外，让事情更容易预测。

修改路由配置：

// 原来vue2中： { path: '*', redirect: '/error' }, // 现修改为： { path: '/:pathMatch(.*)*', redirect: '/error' }, 3. typeError: Failed to fetch dynamically imported module:

【解决】

出现原因是alias配置有问题。

3.1 编译器报错：

Unrestricted file system access to "/src/views/Error" For security concerns, accessing files outside of serving allow list will be restricted by default in the future version of Vite. Refer to [https://vitejs.dev/config/#server-fs-allow](https://vitejs.dev/config/#server-fs-allow) for more details.

console报错：

GET [http://localhost:3000/src/views/Error?t=1630134194676](http://localhost:3000/src/views/Error?t=1630134194676) net::ERR_ABORTED 404 (Not Found)

【解决】

后缀问题（同问题4）

4. [plugin:vite:import-analysis] Failed to resolve import "../views/Error" from "src\router\routers.ts". Does the file exist?

【解决】

官方规定，在vite中导入.vue文件时后缀不能省略。

https://github.com/vitejs/vite/issues/178

同时，extensions 引入也不推荐省略后缀。https://cn.vitejs.dev/config/#resolve-extensions

resolve.extensions 类型： string[] 默认： [’.mjs’, ‘.js’, ‘.ts’, ‘.jsx’, ‘.tsx’, ‘.json’] 导入时想要省略的扩展名列表。注意，不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。

// 原报错代码 const Error = () => import('../views/Error') // vue3中需要加后缀 const Error = () => import('../views/Error.vue') 5. JavaScript Uncaught RangeError: Maximum call stack size exceeded at Object.resolve (vue-router.esm-bundler.js:1404)

【解决】修改路由配置，嵌套路由不能使用vue2那种方式，要用如下新写法。

// vue2 的方式 { name: 'main', path: '/main', component: Main, redirect: '/error' meta: { title: 'main', }, children: [{ path: '/error', component: Error, meta: { title:'error' } } ] }, // vue3 写法 { name: 'main', path: '/main', component: Main, meta: { title: 'main', }, children: [{ path: '', // 相当于替代 redirect: '/error' component: Error, meta: { title:'error' } } ] },

此时，按照上面的配置，当你访问 /user/eduardo 时，在 User 的 router-view 里面什么都不会呈现，因为没有匹配到嵌套路由。也许你确实想在那里渲染一些东西。在这种情况下，你可以提供一个空的嵌套路径

官方demo

6. TS2307: Cannot find module '@/router/index' or its corresponding type declarations.

在.ts文件中，使用alias 方式import引入ts文件，会报错。【解决】在tsconfig.json 文件中，增加alias配置。

{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["./src/*"], "@comp/*": ["./src/components/*"], "@img/*": ["./src/assets/images/*"], "@api/*": ["./src/js/api/*"], "@util/*": ["./src/js/util/*"], "@style/*": ["./src/styles/*"], "@var/*": ["./src/styles/var.less"], } } } 7. Whitelabel Error Page 报错

`` 错误写法：

server: { proxy: { '/': { target: 'http://*******/', changeOrigin: true, rewrite: (path) => path.replace(/^\//, '') } } }

原因：不能使用'/':，在路径中会直接拦截，所以页面找不到。修改为：（/ 后随便加什么一个特殊的名字标识都可以）

server: { proxy: { '/api': { target: 'http://*******/', changeOrigin: true, rewrite: (path) => path.replace(/^\//, '') } } } 8. TS7016: Could not find a declaration file for module ...

在.vue中import 接口.ts文件时报错，报错源码： import {fun} from '@api/funfile.ts'

解决：在shims-vue.d.ts 文件中增加一句declare module '*.ts'