vue3 history模式配置及nginx服务器配置

vue的路由方式有hash模式和history模式,history模式路由看起来有好些,路由路径里没有#号,而hash模式默认是有#号的。

vue3开始默认新建的项目都是history模式,不过history模式打包后想要使用正常访问的话,需要后端服务器进行配置才可以,否则可能会出现刷新后404的问题。一般情况下,服务器端使用nginx服务器进行配置。

一、vue3 history模式配置:

vue3前端history模式配置如下,这里给一个路由route/index.js里配置的例子:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  // history模式(hash模式的话,这里是createWebHashHistory)
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/wap/',
      name: 'wap',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/MobileView.vue')
    }
  ]
})

export default router

vite.config.js里的路径配置,这里给一个例子:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  //这里也可以设置为/路径
  base: '/calculator',
  publicDir: "public",
  assets: "src/assets",
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    assetsDir: "assets",
  },
})

以上例子中vite.config.js的配置,打包后访问的路径为https://xxx.com/calculator/。

配置好后,我们在开发完项目后,运行npm run build就可以打包history模式的项目了。

二、nginx服务器配置:

这里用的linux系统的nginx服务器。这里给出会用到的nginx命令:

1、判断服务器是否安装nginx,查看nginx状态;

ps -ef | grep nginx

如果出现如下图类似的运行进程,证明nginx已安装并正在运行。

2、服务器安装nginx;

如果我们的linux服务器没有安装nginx服务,可以通过以下命令安装nginx服务。

(1)安装依赖包

//一键安装上面四个依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

(2)下载并解压安装包

//创建一个文件夹
cd /usr/local
mkdir nginx
cd nginx
//下载tar包
wget http://nginx.org/download/nginx-1.13.7.tar.gz
tar -xvf nginx-1.13.7.tar.gz

(3)安装nginx


//进入nginx目录
cd /usr/local/nginx
//进入目录
cd nginx-1.13.7
//执行命令 考虑到后续安装ssl证书 添加两个模块
./configure --with-http_stub_status_module --with-http_ssl_module
//执行make命令
make
//执行make install命令
make install

(4)启动nginx

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
//或者
nginx -c /usr/local/nginx/conf/nginx.conf 

3、查看nginx版本号;

//直接使用nginx命令时,是已经切换到nginx/sbin/nginx目录
nginx -v
//或者
/usr/local/nginx/sbin/nginx -v

4、nignx配置;

# 打开配置文件
vi /usr/local/nginx/conf/nginx.conf
//或者用ftp下载nginx.conf下来后进行编辑

这里给一个简单的监听一个域名端口的nginx.conf配置文件:

server
{
    listen 80;
	listen 443 ssl http2;
    server_name abc.xxx.com;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/abc.xxx.com;
    
    #SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    ssl_certificate    /etc/letsencrypt/live/abc.xxx.com/fullchain.pem;
    ssl_certificate_key    /etc/letsencrypt/live/abc.xxx.com/privkey.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    error_page 497  https://$host$request_uri;

    #SSL-END
    
    #ERROR-PAGE-START  错误页配置,可以注释、删除或修改
    error_page 404 /404.html;
    error_page 502 /502.html;
    #ERROR-PAGE-END
    
    #PHP-INFO-START  PHP引用配置,可以注释或修改
    include enable-php-00.conf;
    #PHP-INFO-END
    
    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/abc.xxx.com.conf;
    #REWRITE-END
    
    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
    
    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log off;
        access_log off;
    }
    
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log off;
        access_log off; 
    }

    #vue3 history模式站点目录配置

    location /calculator {
      try_files $uri $uri/ /calculator/index.html;
    }

    access_log  /www/wwwlogs/abc.xxx.com.log;
    error_log  /www/wwwlogs/abc.xxx.com.error.log;
}

5、检测nignx配置是否正确;

./nginx -t
//或者
nginx -t

 出现如上图所示test is successful表示配置文件正确。

6、重启nginx服务。
配置文件编写或者更改后,需要重启nginx服务才能生效。

nginx -s reload

这样,我们通过访问https://abc.xxx.com/calculator/或者https://abc.xxx.com/calculator/wap/这个路径就可以正常使用了,刷新也不会出现404问题。

三、宝塔nginx配置文件路径

如果我们是通过宝塔系统建站配置的,那么更加的方便,都是可视化操作配置。

宝塔面板站点Nginx配置文件nginx.conf路径位置放在:/www/server/panel/vhost/nginx/xxx.com.info.conf下。

  • 0
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 要在Vue中使用history模式,您需要对Nginx进行配置以正确处理路由请求。 首先,您需要在Vue的路由器中启用history模式,可以通过以下方式完成: ``` const router = new VueRouter({ mode: 'history', routes: [...] }) ``` 然后,在Nginx配置文件中添加以下代码: ``` location / { try_files $uri $uri/ /index.html; } ``` 这将确保当Nginx服务器接收到路由请求时,它将返回Vue应用程序的index.html文件,并允许Vue路由器处理请求。 最后,确保重新加载Nginx服务器以使更改生效: ``` sudo service nginx reload ``` 这样就完成了Vue history模式Nginx配置。现在,您应该能够使用Vue的路由器进行导航,并且当用户刷新页面或直接访问路由时,Nginx将正确地将请求发送到Vue应用程序。 ### 回答2: Vue是基于组件化开发的JavaScript框架,常用于构建单页面应用(SPA)。Vue提供了路由功能,方便前端开发实现页面之间的路由跳转。其中,Vue的路由模式有两种,一种是hash模式,一种是history模式。在hash模式下,URL中带有#号,如http://localhost/#/home,而在history模式下,URL是真实的路径,如http://localhost/home。在实际开发中,history模式更加友好,更符合我们对URL的期望,但需要特殊的nginx配置。 要在Vue中使用history模式,需要先设置VueRouter的mode属性为history。具体方法如下: ``` javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ mode: 'history', routes: [...] }) ``` 设置完后,Vue会使用HTML5的History API来实现前端路由。 接下来,我们需要在nginx服务器中进行配置,来支持history模式nginx是一个开源的高性能Web服务器软件,常被用于作为静态资源服务器和反向代理服务器。我们需要在nginx配置文件中添加以下内容: ``` nginx server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } } ``` 在这里,我们设置了一个nginx的server块,并监听80端口。location /表示匹配到的所有路径,root指定了网站的根目录,index指定默认的访问页面。try_files语句表示当nginx找不到对应的静态资源时,将会跳转到index.html页面,这就是Vue使用history模式所需的。 同时,为了让Nginx生效,我们需要执行以下命令,重新加载nginx配置:sudo nginx -s reload 总结:通过Vuehistory模式,我们可以实现更美观、更友好的URL路径,但需要在nginx服务器中进行配置。通过以上的方法,我们可以轻松实现history模式nginx配置,使我们可以愉快地在Vue中使用history模式了。 ### 回答3: Vue是一款现代化、轻量级且非常有用的前端框架,可以让开发者迅速地创建高质量的单页应用程序。而Vue Router是Vue框架的官方路由管理器,可以帮助我们处理应用程序中的所有路由。 Vue Router支持两种路由模式:Hash模式History模式,其中Hash模式就是默认的模式,而History模式则需要对服务器端和Nginx进行一些配置。 当我们使用Vue Router的History模式时,需要确保我们已经在服务器端正确地配置了路由。这样才能确保我们在浏览器中访问特定页面时,服务器能够正确地响应相关路由。 在Nginx配置Vue Router的History模式非常简单,只需在服务器端的Nginx配置文件中添加以下代码: ``` location / { try_files $uri $uri/ /index.html; } ``` 这段代码的意思是,当请求的URL与文件系统中的文件或目录匹配时,直接返回该文件或目录的内容。如果无法匹配,就返回/index.html中的内容。 这样,当我们在浏览器中访问特定的路由时,Nginx就会返回/index.html的内容,而Vue Router会根据我们的路由配置去渲染对应的组件。这样就能保证Vue Router的History模式正常工作。 总的来说,虽然Nginx配置比较简单,但是我们还是需要正确地配置以确保Vue Router的History模式能够正常运行。只有这样,我们才能在开发原型和生产环境中使用Vue框架和Vue Router,实现快速、高效的前端开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

持续学习的工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值