【已解决】创建文件自动注册路由, 打包之后页面空白

前

在之前vue中使用自动注册 svg 图标 (文章在这里 Vue使用svt-sprite-loader自动引入svg图标) 的时候我发现了 require.context() 方法, 我觉得, 可以用这个方法来自动添加路由, 就开始了踩坑之路.

目录文件结构

我的路由文件都放在了 src/views/ 下.

注意:

1. 我在项目中使用到了 typescript, 所以我的文件后缀为 .ts.
2. 文件名字自已随意定.
3. 有些代码可以写在一个文件, 我选择了拆分代码.

require.context 方法.

这个是我自己定义的参数名, 并非官方复制 大家能理解就行
require.context(path, recursive, fileType)
参数:
path: 要处理那个路径下的文件
recursive: 是否递归子文件夹下文件
fileType: 文件类型

const files = require.context('./', true, /\.vue$/)
files.forEach(key => {
     
	files(key).default // 这里可以看到组件的内容哦.
})

1. 自动注册路由方法

在 views 文件夹下面新建 pages.js.
pages.js

const files: any = require.context('./', true, /\.vue$/)
const pages: any = {
     }
files.keys().forEach((key: any) => {
     
  // 使用正则来取文件名称, 作为路由的 path;
  /* 由于我使用了ts, vue文件模板写法也有差别, 在这里如果要获取 vue 页面里面的数据什么的需要改变写法, 所以我放弃了在vue页面中添加变量配置的方法.  */
  const str = key.match(/[\w]+\./)![0].replace('.', '')
  pages[str] = key
})
export default pages
/*	处理后
	文件名: '文件路径'
{
	About: "./About.vue",
	Background: "./Background/Background.vue"
}
*/

2. 处理路由数据

在 src/route 下新建 route.js 文件:
在这里我用了两种方法, 是因为第一次使用的方法出现了问题 (打包之后页面空白, 就是路由引入问题), 做了修改

一定要使用字符串拼接的方式来引入.
一定要使用字符串拼接的方式来引入.
一定要使用字符串拼接的方式来引入.
重要的事情说三遍 原因请看这篇文章出现的问题:
Vue 动态引入图片报错

// 引入刚才处理过的数据
import pages from '@/views/pages'
// 用来存放路由数据
const routes: any = []
/* 使用这种方法 */
for (const key in pages) {
     
  routes.push({
     
    path: `/${
       key}`,
    // 注意: 我在这里把路径处理了一下.
    /*
    	pages 里面的路径是相对路径, 和当前文件不是同级, 引入会出问题, 所以我使用了绝对路径来引入.
    	处理方法:
    		源数据: './Background/Background.vue'
    		删除相对路径 './'
    	引入的时候使用 import(<绝对路径> + <文件夹/文件名>)
    */
    component: () => import('@/views/' + pages[key].replace('./', '')),
  })
}

export default routes

处理之后的数据

这个是打包之后会出现错误的代码: 错误的 错误的 错误的 代码 看一下就好

Object.keys(pages).forEach((key: string) => {
     
  if (pages[key] && pages[key].name) {
     
    routes.push({
     
      path: `/${
       pages[key].name}`,
      component: () => import(pages[key]),
    })
  }
})

3. 把处理之后的数据添加到路由文件中

src/router/index.js 文件

import Vue from 'vue';
// 注意 ts 写法, js 文件有些不同
import VueRouter, {
      RouteConfig } from 'vue-router';

// 引入处理过的数据 就是 route.js 中的
import routerList from './route'
Vue.use(VueRouter);

const routes: RouteConfig[] = [
  ...routerList, // 合并到 routes 路由配置里面来
  {
     
    path: '/',
    redirect: '/Home',
  }
];

const router = new VueRouter({
     
  routes,
});

export default router;

完成, 之后就可以直接在 views 下新建 .vue 文件 而不用手动去添加路由配置.