在nginx上部署vue项目(history模式)的方法

Vue-router默认采用hash模式，通过利用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。如果我们希望摆脱以号结尾的路径限制，可以选择使用路由的history模式。

在history模式下，访问的路径变得更加简洁，不再带有号。例如，使用hash模式时，访问路径可能是这样的：

以vue-cli项目为例，我们可以在src/router/index.js中进行配置。导入Vue和Router，然后配置路由模式为history。

```javascript

import Vue from 'vue';

import Router from 'vue-router';

Vue.use(Router);

const router = new Router({

mode: 'history', // 使用history模式

base: '/bank/page', // 设置基础路径

routes: [

{

path: '/count',

name: 'count',

component: resolve => require(['@/views/count'], resolve) // 懒加载

}

]

});

```

使用history模式需要在后台进行配置支持。在默认情况下，当我们直接访问路径时，服务器会返回404错误。因为在history模式下，只是通过JS操作window.history来改变浏览器地址栏里的路径，并没有发起HTTP请求。当直接在浏览器中输入这个地址时，服务器找不到对应的目标，就会返回404错误。为了解决这个问题，我们需要将所有请求转发到指定的页面。

对于Apache服务器，我们可以通过配置.htaccess文件来实现这一点。在文件中加入以下代码：

```apache

RewriteEngine On

RewriteBase /

RewriteRule ^index\.html$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /bank/page/index.html [L]

```

这段代码的作用是将所有服务器上不存在的请求全部转发到index.html页面，从而可以通过各种URL来访问。

需要注意的是：

1. 在使用上述代码时，需要根据实际情况修改RewriteBase和RewriteRule中的路径，确保与你的项目配置相匹配。

2. 在vue-cli项目中，需要修改config/index.js中的build下的assetsPublicPath为正确的路径。如果使用相对路径，可能会导致chunk文件找不到。

3. 确保在Apache服务器上开启了rewrite_module功能，并修改httpd.conf文件以启用.htaccess文件的支持。找到AllowOverride None的行，将其改为AllowOverride All，以使.htaccess文件生效。这样配置后，你就可以在Nginx上成功部署Vue项目并使用history模式了。配置nginx服务器以支持vue-cli打包项目

通过执行vue-cli的打包命令npm run build，我们可以在dist文件夹下获取到项目文件。仅仅复制这些文件到nginx服务器并不能完全实现项目的路由功能，因为nginx默认配置并不支持单页面应用（SPA）的路由。为此，我们需要在nginx服务器上进行一些配置。

登录到nginx服务器，并进入配置文件所在的目录/etc/usr/local/nginx/conf/。在这个目录下，你会看到一个名为nginx_v4.conf的配置文件。这是我们接下来要修改的地方。

在nginx_v4.conf文件中，我们需要添加一些配置以实现SPA的路由功能。以一个域名aa..为例，相关的配置如下：

```nginx

server {

listen 443; 监听本机所有ip上的443端口

listen 80; 监听本机所有ip上的80端口

server_name aa..; 域名地址

access_log /data/logs/nginx/aa/access.log main; 定义访问日志路径

error_log /data/logs/nginx/aa/error.log; 定义错误日志路径

root /path/to/your/dist; 指定vue项目的dist目录路径

index index.html; 指定默认首页文件

location / {

try_files $uri $uri/ /index.html; 对于所有路径尝试按顺序查找文件，如果找不到则重定向到首页index.html

}

location /bank/page/ {

try_files $uri $uri/ /bank; 针对特定的路由进行重定向设置，如对于bank页面的路由进行特殊处理

}

location /bank2/page/ {

try_files $uri $uri/ /bank2; 对于其他特定路由同样进行重定向设置

}

其他相关配置...

}

```

这里的try_files指令用于按顺序检查文件是否存在，返回第一个找到的文件或文件夹。如果所有文件都找不到，会进行一个内部重定向。location指令则是用于匹配特定的URI并进行配置。在这里我们使用了两个location指令来针对特定的路由进行配置。配置完成后需要重启nginx服务器以使配置生效。重启命令为：在 /etc/usr/local/nginx/sbin目录下运行 ./nginx -s reload。

注意：以上配置中的路径需要根据实际情况进行修改，确保路径正确指向你的vue项目文件和日志文件的实际位置。配置文件的修改和重启操作需要具有相应的权限。如果不熟悉nginx的配置和操作，建议在进行操作前详细了解相关知识和注意事项。今天长沙网络推广想和大家分享如何在nginx上部署vue项目（history模式）的方法。对于nginx的配置，让我们一步步来了解。

当你在nginx中进行编辑后，保存并退出的命令是 `:wq`，而直接退出的命令是 `:q`。这些命令能帮助你轻松地在nginx配置文件中进行保存或退出。

接下来，如果你的Mac系统自带了Apache2服务器，并需要进行反向代理配置，那么进入本地mac apache2配置是首要步骤。你可以通过命令 `cd /etc/apache2` 进入配置目录，然后使用 `sudo vi httpd.conf` 命令进行编辑。在配置文件中，你需要添加类似以下的虚拟主机配置：

```bash

ServerName aa.

ProxyRequests off

Header set Access-Control-Allow-Origin ""

Order deny,allow

Allow from all

ProxyPass

ProxyPassReverse

// 更多配置省略...

```

配置完成后，进入sbin目录下启动服务，使用 `sudo apachectl start` 命令启动Apache服务器。如果需要重启服务，可以使用 `sudo apachectl restart` 命令。

至于Java服务端的配置，如果你使用的是虚拟机并且页面VM不放在开发那边，某些配置如狼蚁网站SEO优化可以略过。在项目目录下 webapp/web-inf/view/ 新建文件夹和文件。例如，在aa文件夹下新建index.vm文件，并编写相应的代码。同时需要设置路由 /aa 指向 /aa/index.vm。include/mon.vm文件中的地址配置需要在disconf上完成，你可以添加一个地址配置到aa../aa/dist上。

以上就是长沙网络推广给大家介绍的关于在nginx上部署vue项目（history模式）的方法。希望对各位有所帮助。如有任何疑问，请给我留言，我会及时回复大家。非常感谢大家对狼蚁SEO网站的支持！

注：以上内容仅供参考，具体部署过程可能因项目和环境差异而有所不同。在进行任何配置更改之前，请确保你了解相关知识和风险。