angular6使用PathLocationStrategy路由策略打包发布的问题

问题描述

开发的一个angular项目,采用的是PathLocationStrategy路由策略,打包完成之后,直接运行index.html文件,发现引入的main.js路径不对,报404错误,项目中也引入了一些图片,也是路径引入不对,报404错误。

经过调试发现,图片和main.js引入的全部是/根目录,受到<base href="/" />这个影响,因此直接在index.html中把这行代码删掉,结果又返回错误,说必须需要指明base href的路径

解决办法

app.module.ts文件中添加如下代码

providers: [
    {provide: APP_BASE_HREF, useValue: './'},
]

我将默认的’/’ 改成了 ‘./’

这样在index.html中就以相对路径的方式去加载main.js等依赖文件了

如何正确显示图片

若是图片,可以放置 assets 文件夹中,因为 angular cli 会在构建的时候复制该文件夹;至于这些资源的文件名(例如文件名加上HASH),那么可以透过 --output-hashing 参数。

angular打包之后,是将index.html文件和asserts文件夹在同一目录,因此,图片引入的路径是<img src="assets/images/home2.png" class="home-image" >

如何制定发布工程的工程名

app.module.ts文件中添加如下代码

providers: [
    {provide: APP_BASE_HREF, useValue: '/senior-project'},
]

我将默认的’/’ 改成了 ‘/senior-project’,所有的静态资源,将是以/senior-project为前缀去寻找资源,如果不配置,则,服务器访问的是 http://localhost:8080/senior-project/index.html,路由会把URL改为http://localhost:8080/index.html;让人有种URL变化的错觉,实际上这里的页面还是访问服务器的 http://localhost:8080/senior-project/index.html路径,只是URL的值通过JS改变了样子。

总结

  1. PathLocationStrategy路由策略是需要跟http服务器(apache、nginx)配合的
  2. URL的变化只是表象,它的本质始终都是一个SPA(单页面应用),页面没有做任何跳转
  3. asserts文件夹会跟最终的index.html在同一级目录下面
  4. 只要我们发布的页面不是在服务器(nginx)根目录下面,就需要设置 base href
  5. 最终打包生成的main.js 始终是跟index.html是在同一级目录下面,因此采用相对路径更稳妥,或者默认是访问根目录
  6. 如果发布的最终文件是在服务器的某个工程名下面,就需要设置APP_BASE_HREF的值与文件夹名一致
阅读更多

没有更多推荐了,返回首页