vue3 打包 路由history/hash和Nginx相关配置

同一个域名地址下部署两个访问项目路径

• vue中的hash模式

例如: 同一个域名地址下会访问两个目录项目 xxx.com.cn 和 xxx.com.cn/#/platform 即地址栏 URL 中的 # 符号,这个#就是hash符号，中文名哈希符或锚点 比如这个 URL：xxx.com.cn/#/platform，… 的值为 #/platform 它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

路由的哈希模式其实是利用了window.onhashchange事件，也就是说你的url中的哈希值（#后面的值）如果有变化，就会自动调用hashchange的监听事件，在hashchange的监听事件内可以得到改变后的url，这样能够找到对应页面进行加载

window.addEventListener('hashchange', () => {
  // 把改变后的url地址栏的url赋值给data的响应式数据current，调用router-view去加载对应的页面
  this.data.current = window.location.hash.substr(1)
})

1. router.js 添加base

import { createWebHashHistory, createRouter } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),  //hash 路径
  routes
});

2. 项目根目录下的vite.config.js文件

export default defineConfig(({ mode, command }) => {
   return {
       base:'/',                // 公共路径
       build:{
          outDir: 'dist',       // 打包的目录
          assetsDir: 'static',  // 打包的静态资源目录 部署同一根目录下的项目命名应该不一样
       }
   }
})

3.服务器nginx.conf 文件配置

// server 的配置
server {
    listen       80;
    server_name  test.com;
    #charset  oi8-r;
    #access_log  logs/host.access.log  main;

    # 根目录访问, http://xxx.com/
    location / {
      root   /data/device/web/user/dist;
      index  index.html index.htm;
    }


    # 二级目录访问, http://xxx.com/platform
    location /platform {
     alias  /data/device/web/platform/dist;
     index  index.html index.htm;
    }
    
    # 二级目录访问的静态资源, 不能和一级目录的静态资源文件名一致, 否则默认定向到platform
    location /static {
        alias  /data/device/web/platform/dist/static;
	index  index.html index.htm;
    }
}

• vue中history模式

例如: 同一个域名地址下会访问两个目录项目 xxx.com.cn 和 xxx.com.cn/platform 比如这个 URL：xxx.com.cn/platform 在这个路经下访问项目 HTML5 History Interface 中新增的两个神器 pushState() 和 replaceState() 方法（需要特定浏览器支持），用来完成 URL 跳转而无须重新加载页面，不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，就需要前端自己配置404页面。

pushState方法、replaceState方法，只能导致history对象发生变化，从而改变当前地址栏的 URL，但浏览器不会向后端发送请求，也不会触发popstate事件的执行popstate事件的执行是在点击浏览器的前进后退按钮的时候，才会被触发

window.addEventListener('popstate', () => {
 this.data.current = window.location.pathname
})

1. router.js 添加base

import { createWebHistory, createRouter } from 'vue-router'

const router = createRouter({
  history: createWebHistory('/platform/'),  //history 路径
  routes
});

2. 项目根目录下的vite.config.js文件

export default defineConfig(({ mode, command }) => {
   return {
       base:'/platform/',       // 公共路径
       build:{
          outDir: 'dist',       // 打包的目录
          assetsDir: 'static',  // 打包的静态资源目录  部署同一根目录下的项目命名应该不一样
       }
   }
})

3.服务器nginx.conf 文件配置

// server 的配置
server {
    listen       80;
    server_name  test.com;
    #charset  oi8-r;
    #access_log  logs/host.access.log  main;

    # 根目录访问, http://xxx.com/  默认读取根目录下的静态资源
    location / {
      root   /data/device/web/user/dist; // 服务端访问web资源目录
      index  index.html index.htm;
      try_files $uri $uri/ /index.html; #解决页面刷新404问题
    }

    # 二级目录访问, http://xxx.com/platform
    location /platform {
     alias   /data/device/web/platform/dist;  // 服务端访问web资源目录
     index  index.html index.htm;
     try_files $uri $uri/ /platform/index.html; #解决页面刷新404问题
    }
    
    # 二级目录访问的静态资源, 不能和一级目录的静态资源文件名一致, 否则默认定向到platform
    location /static {
        alias   /data/device/web/platform/dist/static;
	index  index.html index.htm;
    }
    
    # 代理访问api地址
    location /open/{
        proxy_connect_timeout 60s;
        proxy_read_timeout 600s;
        client_max_body_size 500m;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:19980/;
    }
}