vue history 模式打包部署在域名的二级目录的配置

Vue History 模式打包部署在域名二级目录的配置宝典

在进行前端项目开发时，我们经常需要将项目部署在域名的二级目录，并且使用 vue-router 的 history 模式。本文将详细介绍这一过程，以帮助大家更好地理解和操作。

一、了解 vue-router 的两种模式

vue-router 提供了两种前端访问模式：hash 和 history。hash 模式 URL 后面带 ，不太美观。而 history 模式则更为优雅，但需要服务器端的配合。

二、配置 vue-router

在 vue-cli3 版本下，部署在域名的二级目录需要进行四处配置。配置 vue-router 路由文件，根据实际的二级目录填写。例如，如果你的项目部署在 "/web" 下，那么 base 字段应该设置为 "/web"。

三. 配置 vue.config.js

在项目的根目录下找到 vue.config.js 文件（如果不存在则新建一个）。在此文件中，设置 publicPath 字段为二级目录路径，例如 "/web"。注意：从 Vue CLI 3.3 起，baseUrl 已弃用，请使用 publicPath。

四、配置 index.html

在入口文件 index.html 的 head 标签内加入 ，以指定基路径。

五、配置服务器

以 nginx 为例，部署配置如下：

```nginx

server {

listen 80;

server_name localhost; // 你的域名

root /home/root/; // 你的项目根目录

location /web { // 你的二级目录路径

try_files $uri $uri/ /web/index.html; // 当请求路径不存在时，返回 index.html 文件

}

}

```

至此，配置和部署已经完成。将打包好的前端静态资源放在域名指定的根目录下的二级目录即可。请注意，以上配置是针对在 history 模式下部署在域名下的二级目录的情况。hash 模式部署在域名根目录则无需如此多的配置。

本文由长沙网络推广给大家分享，希望对大家有所帮助。如有任何疑问，请留言联系，长沙网络推广会及时回复。感谢大家对狼蚁SEO网站的支持！如本文对你有所帮助，欢迎转载，请务必注明出处。谢谢！如有侵权请联系删除！