angular项目SEO去掉路由#详解

最新推荐文章于 2023-07-11 16:33:49 发布

xin_jie

最新推荐文章于 2023-07-11 16:33:49 发布

阅读量559

点赞数

本文链接：https://blog.csdn.net/xin_jie/article/details/77478165

版权

本文介绍如何在Angular项目中配置路由以去除URL中的'#'符号，并通过本地nginx服务器实现平滑的页面跳转。主要步骤包括：启用html5Mode、设置<base>标签以及nginx的location配置。

摘要由CSDN通过智能技术生成

angular项目路由不使用#管理

1、在路由配置下添加 $locationProvider.html5Mode(true);

 
 
  
  .config([
  
  '$locationProvider', 
  
  function ($locationProvider) {
 
 
 
 
  
      $locationProvider.html5Mode(
  
  true);
 
 
 
 
  
  }])

2、需要本地查看到效果需要配置 <base href="xxx/xxx"> ，href路径为项目根目录的文件夹。比如我的项目index.html的路径是 tmw/app/index.html ，那么 tmw/app 就是根目录路径。

（在配置nginx后在index.html中<base href="xxx/xxx">改为<base href="/">，href路径为项目根目录的文件夹）

3、配置本地nginx环境

下载安装后(http://jingyan.baidu.com/article/f3e34a12a9c1c3f5eb6535d4.html)

对其中nginx.conf文件进行修改（仅需修改蓝色文字部分）

server {
listen 8890;
server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {
root D:xxx/xxx/xxx/xxx; 此处为项目中index.html位置
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}