typescript + vue 项目通过yarn打包后丢到服务器上打开报错,本地运行没问题

发布于 2022-09-12 22:28:06 字数 1571 浏览 23 评论 0

如图所示, 感觉是路由加载的问题,麻烦大佬看下代码
image.png
name 报undefined的地方是这里
image.png

index.ts

import Vue from 'vue';
import VueRouter from 'vue-router';
import routeConfig from './route-config';

Vue.use(VueRouter);
const router = new VueRouter(routeConfig);

export default router;

route-config.ts

import { RouterOptions } from 'vue-router';

const pageMap = {};

const requireComponent = require.context('@/views', false, /.vue$/);
requireComponent.keys().forEach((filename) => {
  const component = requireComponent(filename).default;
  const { name } = component;
  pageMap[name] = {
    name,
    path: `/${name}`,
    component,
  };
});

const routes = Object.keys(pageMap).map((name) => pageMap[name]);

const routerConfig: RouterOptions = {
  base: process.env.BASE_URL,
  routes: [
    {
      path: '*',
      redirect: 'homePage',
    },
    {
      path: '/',
      redirect: 'homePage',
    },
    ...routes,
  ],
};
export default routerConfig;

经过分析是打包后通过require.context 批量导入文件的时候这里好像被压缩了
image.png
image.png
image.png

 。打包后这个name 感觉是被压缩了好像,变成n了。所以路由最后成这样了
这是本地的。因此redirect 会一直跳不到homePage,然后就内存溢出了。
image.png
image.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

最美的太阳 2022-09-19 22:28:06

已解决,通过 componet.options.name 可获取到

〃温暖了心ぐ 2022-09-19 22:28:06

难道还不会打开开发模式,看一下 Network 请求的数据是什么吗?对比一下,为什么是undefined啊?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文