当前位置: > > > Vue.js - 使用History模式路由时Nginx的配置方案(附样例)

Vue.js - 使用History模式路由时Nginx的配置方案(附样例)

    vue-router 默认路由模式为 hash 模式,该模式是使用 urlhash 来模拟一个完整的 url。但使用这种模式,URL 中会带一个 # 号(比如 http://127.0.0.1:9090/#/about),比较丑,不像是正常的 url
    除了默认的 hash 模式外,我们也可以用路由的 history 模式。 当我们使用 history 模式时,URL 就像正常的 url 了,例如 http://127.0.0.1:9090/about。不过要使用这种模式,还需要后台服务端的支持。下面以使用 Nginx 为例,演示如何进行配置。
需要后台配置的原因:
  • 因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://127.0.0.1:9090/about 时,服务端以为没有找到对应文件,就会返回 404 错误。
  • 因此我们要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是我们 app 依赖的页面。

情况一:项目直接使用根域名,没有二级路径

1,Nginx 配置修改

    这种情况是同一个域名下只有一个项目,没有其他二级路径,因此 root 直接指向目标文件夹,即包含 index.html 的文件夹路径即可。
提示try_files 是实现 History 模式的关键配置。该指令作用是按指定的 file 顺序查找存在的文件,并使用第一个找到的文件进行请求处理。
    server {
        listen       9090;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /Volumes/BOOTCAMP/Vue/hangge-app/dist;
            try_files $uri $uri/ /index.html;
            index  index.html;
            add_header Access-Control-Allow-Origin *;
        }

        #error_page  404              /404.html;

2,Vue 项目配置

Vue 项目这边我们只需要将 VueRoutermode 设置为 history 即可:
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

3,运行测试

重启 Nginx 服务,访问一个路由路径为 /about 页面效果如下:

情况二:项目使用二级路径

1,Nginx 配置修改

(1)如果同一个域名下有多个项目,那么不同项目就需要用二级路径来区分了。假设我们使用 /hangge 作为该项目的二级域名,那么 Nginx 这边配置如下:
注意:这里我们指定文件路径使用的是 alias,而不是 root
    server {
        listen       9090;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /hangge {
            alias   /Volumes/BOOTCAMP/Vue/hangge-app/dist;
            try_files $uri $uri/ /hangge/index.html;
            index  index.html;
            add_header Access-Control-Allow-Origin *;
        }

        #error_page  404              /404.html;

2,Vue 项目配置修改

(1)首先我们修改路由配置,由于现在使用 /hangge 作为该项目的二级域名,那么路由的 base 则设置成 /hangge
const router = new VueRouter({
  mode: 'history',
  base: '/hangge',
  routes
})

(2)如果项目是 vue-cli 4 搭建的,需要修改 vue.config.js 文件,将 publicPath 属性设置为 './'
提示vue.config.js 是一个可选的配置文件,如果项目根目录不存在该文件,可以手动创建 (和 package.json 同级) 。
module.exports = {
   publicPath: './'
}
  • 而如果项目是 vue-cli 3.X 搭建的,同样是修改 vue.config.js 文件,不过是将 baseUrl 属性设置为 './'
module.exports = {
   baseUrl: './'
}

3,运行测试

重启 Nginx 服务,访问一个路由路径为 /about 页面效果如下:
评论0