vite2.0 踩坑实录

算是对上一篇的补充，记录了一些在配置项目中遇到的问题，希望对大家能有所帮助～

vite项目构建优化

路由动态导入 经过rollup的构建，动态导入的文件将会生成异步的chunk文件，在我们访问项目的时候按需加载，极大的提升应用的加载速度

import Home from '@/views/home/index.vue'
import Layout from '@/components/Layout.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: Layout,
    redirect: '/home',
    children: [
      {
        path: '/home',
        name: 'Home',
        component: Home,
        meta: { title: '首页' }
      },
      {
        path: '/about',
        name: 'About',
        meta: { title: '关于', keepAlive: true },
        component: () => import('@/views/about/index.vue')
      },
      {
        path: '/square',
        name: 'Square',
        meta: { title: '组件广场', keepAlive: true },
        component: () => import('@/views/square/index.vue')
      }
    ]
  }
]
const router = createRouter({
  history: process.env.NODE_ENV === 'development'
    ? createWebHistory(process.env.BASE_URL)
    : createWebHashHistory(process.env.BASE_URL),
  routes,
    scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        // 通过前进后台时才触发
        return savedPosition
      } else {
        return { top: 0, behavior: 'smooth' }
      }
    }
  })

router.beforeEach((to, from, next) => {
  // 可以对权限进行一些校验
  if (to.path !== from.path) {
    document.title = `星乐圈 | ${to.meta.title}`
  }
  next()
})

router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  if (isChunkLoadFailed) {
    location.reload()
  }
})

export default router

上述代码，是一个vite构建的vue项目的router文件，使用的vue-router@4.0.6,Vue Router支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入.在代码中可以看到：about页和square页都是动态导入的。

关于动态导入，MDN上有非常详细的介绍:传送门

经过rollup的构建，动态导入的文件将会生成异步的chunk文件，在我们访问项目的时候按需加载，极大的提升应用的加载速度。

在vite项目中的路由动态导入中我踩的坑：

构建时不支持@/别名。在构建的时候，rollup构建时并不能按照配置的别名找到对应的文件，因此在构建环节会有报错

解决方案：

• 一开始感觉是引用路径的问题，所以尝试了几种引用方式,然后终于有一种成功了！component: () => import('/src/views/about/index.vue') 改成绝对路径以后，就可以正常启动
• 升级vite版本，一开始是vite@2.0.0-beta.35，不支持别名。在升级到vite@2.3.8之后就支持了。估计是2.0刚出，一下子没有写完善也是可以理解滴～
• 使用import.meta.glob方法

我配置使遇到的一些报错和警告

warning: "import.meta" is not available in the configured target environment ("es2019") and will be empty

当vite配置项esbuild.target 为 ‘es2019‘的时候，会有这个警告。表示这个情况下不支持使用import.meta api

[vite] Internal server error: Invalid glob import syntax: pattern must start with "." or "/" (relative to project root)

import.meta.glob() 中的参数必须以"." 或 "/" 开头，相对根目录进行匹配

最终的写法部分代码：

  import Layout from '@/components/Layout.vue'

  const modules = import.meta.glob('/src/views/*/index.vue')

  const routes: Array<RouteRecordRaw> = [
    {
      path: '/',
      component: Layout,
      redirect: '/home',
      children: [
        {
          path: '/home',
          name: 'Home',
          component: modules['/src/views/home/index.vue'],
          meta: { title: '首页' }
        },
        {
          path: '/about',
          name: 'About',
          meta: { title: '关于', keepAlive: true