先简单说说项目情况吧
- 使用angular6.x版本
- 使用官方cli脚手架
- 前后分离,angular模块调用node的api,node调用后端的服务
- angular打包过后的dist目录放在node的静态资源目录下
- 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
试试把index.html中的
改为