vue3路由使用createWebHistory部署访问404问题 vite部署访问404问题

vue3路由使用createWebHistory部署访问404问题 vite部署访问404问题

开始

createWebHistory()

这个模式部署Nginx，在部署有遇到很多问题，同样的配置在 不同的vite版本和不同的Nginx版本下有可能会失效，需要多加调整，建议如果不是很在意url样式 可以使用

createWebHashHistory()

模式，这个模式不需要额外对部署的服务器进行配置，所以相对来说简单

Nginx版本是

1.24.0

Vite版本是

5.3.2

createWebHistory() H5路由模式

默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上

例如

http://www.liyangme.top.com/

。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。
例如，应用被部署在

http://www.liyangme.top.com/demo/

，则 base需要配置 为

/demo/

这个问题只有 路由模式为

createWebHistory(H5模式)

才会出现，如果使用的是

#

这样的路由则不会出现

修改vite.config.js

修改

base

为

/demo/

, 具体根据你的应用名称来

修改 router/index.js 路由模式

修改

createWebHistory

中的路径，与

vite.config

中的

base

路径一致
如果部署访问 500或者404，将

createWebHistory

中的路径去掉，重新打包测试

const router =createRouter({history:createWebHistory('/demo/'),routes: constantRoutes,scrollBehavior(to, from, savedPosition){if(savedPosition){return savedPosition;}else{return{top:0};}},});exportdefault router;

修改Nginx

配置1

    server {
        listen 9999;
        server_name localhost;

        add_header 'Access-Control-Allow-Origin''*';
          add_header 'Access-Control-Allow-Credentials''true';
          add_header 'Access-Control-Allow-Methods''*';
          
        error_page 404 /404.html;
        error_page 500502503504 /50x.html;

        location /demo{# windows方式# alias "E:\\apps\\nginx-1.24.0\\nginx-1.24.0\\html\\demo";# Linux方式alias"/apps/nginx-1.24.0/nginx-1.24.0/html/demo";# Linux方式 二# alias /apps/nginx-1.24.0/nginx-1.24.0/html/demo;# 解决刷新404问题
            try_files $uri$uri/ /demo/index.html;}}

配置2

    server {
        listen 9999;
        server_name localhost;
        
        add_header 'Access-Control-Allow-Origin''*';
        add_header 'Access-Control-Allow-Credentials''true';
        add_header 'Access-Control-Allow-Methods''*';
        
        error_page 404 /404.html;
        error_page 500502503504 /50x.html;

        location /demo/ {alias"/apps/nginx-1.24.0/nginx-1.24.0/html/demo";# 解决刷新404问题
            try_files $uri$uri/ /index.html;}}

配置3

    server {
        listen 9999;
        server_name localhost;
        error_page 404 /404.html;
        error_page 500502503504 /50x.html;

        root /apps/nginx-1.24.0/nginx-1.24.0/html;
          index index.html;

           location /demo {
             try_files $uri$uri/ /index.html =404;}}

createWebHashHistory() 哈希模式

修改vite.config.js

修改

base

为

./

修改 router/index.js 路由模式

修改路由模式为

createWebHashHistory()

const router =createRouter({history:createWebHashHistory(),routes: constantRoutes,scrollBehavior(to, from, savedPosition){if(savedPosition){return savedPosition;}else{return{top:0};}},});

打包之后直接将demo文件夹放在 Nginx/html目录下，直接就可以访问了，例如 http://localhost/demo, nginx会自己解析子路径，不需要配置Nginx

Nginx配置 域名非80端口访问

server {
      listen 9999;
      server_name localhost;

      add_header 'Access-Control-Allow-Origin''*';
      add_header 'Access-Control-Allow-Credentials''true';
      add_header 'Access-Control-Allow-Methods''*';

      error_page 404 /404.html;
      error_page 500502503504 /50x.html;

      root /apps/nginx-1.24.0/nginx-1.24.0/html/demo;
      index index.html;

      location / {
         try_files $uri$uri/ /index.html =404;}}

Nginx配置 域名非80端口带子路径访问

server {
      listen 9999;
      server_name localhost;

      add_header 'Access-Control-Allow-Origin''*';
      add_header 'Access-Control-Allow-Credentials''true';
      add_header 'Access-Control-Allow-Methods''*';

      error_page 404 /404.html;
      error_page 500502503504 /50x.html;

      location /demo {
         root /apps/nginx-1.24.0/nginx-1.24.0/html/demo;
           index index.html;
         try_files $uri$uri/ /index.html =404;}}

Nginx配置 域名非80端口带子路径访问

server {
      listen 9999;
      server_name localhost;

      add_header 'Access-Control-Allow-Origin''*';
      add_header 'Access-Control-Allow-Credentials''true';
      add_header 'Access-Control-Allow-Methods''*';

      error_page 404 /404.html;
      error_page 500502503504 /50x.html;

      location /demo {
         root /apps/nginx-1.24.0/nginx-1.24.0/html;
           index index.html;
         try_files $uri$uri/ /index.html =404;}}