网络知识 娱乐 Vue3 创建项目遇到的问题汇总

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

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 outer outers.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'
在这里插入图片描述