angular6 打包代码之后路由地址怎么变了?

先简单说说项目情况吧

  1. 使用angular6.x版本
  2. 使用官方cli脚手架
  3. 前后分离,angular模块调用node的api,node调用后端的服务
  4. angular打包过后的dist目录放在node的静态资源目录下
  5. node使用koa作为框架,配套的还是用了koa-static,koa-router,koa-views

代码如下

/*
* node 端部分代码如下
* 用ejs模版作为模版引擎
*/
// router模块
router.prefix('/node')
router.get('/index', async (ctx, next) => {
  await ctx.render('index.ejs', {})
  // 解释一下为什么不是直接访问angular打包过的静态资源
  // 因为这边要添加一个权限,如果没有登录的话需要重定向到其他的登录页面去(地址是动态的所以没有放在angular里面)
  // 我将angualr打包过后的index.html里面的内容复制到这个index.ejs文件中,配置好js等文件静态资源目录后,一切正常访问
});
// 我将这个router文件导出后在app.js中一次性加载

// angular app-routing.module.ts文件部分代码如下
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true})], // 使用了hash URL模式
  // imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
// 为了性能考虑app下挂在的路由都是采用懒加载的模式 如下:
loadChildren: './pages/aaa/aaa.module#aaa'

当我打包之后用访问 xxxxx:3001/node/index 就会拿到这个页面,问题如下

// 打包过后的代码会将我的我地址替换为如下地址,但是页面没有发生跳转可以正常操作
// http://localhost:3001/#/store/home
// 但是不能刷新,刷新就会404 (因为我并没有在node上配置这个url)

有没有办法可以不让angular去修改url地址 例如访问地址:

http://localhost:3001/node/index/#/store/home
// angualr自己在变动url的时候只是去变动#后面的
// cli打包命令使用 ng build --prod

因为有hash路由模式下页面并没有发生真实的跳转,为什么进入之后url会是http://localhost:3001/#/store/home 难道不应该是http://localhost:3001/node/index/#/store/home

阅读 3.1k
1 个回答

试试把index.html中的

<base href="/">

改为

<script>
    document.write('<base href="' + document.location + '" />');
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题