你好，我是沐爸，欢迎点赞、收藏、评论和关注。
在开发 Vue 项目时，Vue Router 提供了两种模式来创建单页面应用（SPA）的 URL：hash 模式和 history 模式。
简单说下两者的主要区别：
-
hash 模式下的 URL 看起来不那么美观，带有一个 # 符号。在这种模式下，URL 中的 hash 值（# 后面的部分）会改变，但页面不会重新加载。因为不会向服务器发送请求，服务器不需要额外配置。
-
history 模式的 URL 看起来更美观，没有 # 号。history 模式需要服务器配置，因为当用户直接访问 /foo 这样的 URL 时，或者刷新这样的 URL 时，会向服务器发送请求，服务器要能返回一个正确的页面（通常是应用的首页）。
对于这两种模式，在 Vue 项目中，我们该怎么进行配置和打包？部署到服务器时，服务器应该怎么配置呢？今天我们以 Vue2 项目部署到 Nginx 服务器为例玩一玩。
一、前置条件
- 下载 Nginx，官网地址：https://nginx.org/en/download.html
- 新运行一个 Vue2 项目，并将下面的代码片段拷贝到项目中
代码片段
src/App.vue
<template>
<div id="app">
<ul>
<li>
<router-link to="/">home</router-link>
</li>
<li>
<router-link to="/page1">page1</router-link>
</li>
<li>
<router-link to="/page2">page2</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
src/main.js
import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import HomePage from "./views/HomePage.vue";
import CommonPage1 from "./views/CommonPage1.vue";
import CommonPage2 from "./views/CommonPage2.vue";
Vue.use(VueRouter);
Vue.config.productionTip = false;
const routes = [
{ path: "/", component: HomePage },
{ path: "/page1", component: CommonPage1 },
{ path: "/page2", component: CommonPage2 },
];
const router = new VueRouter({
routes,
});
new Vue({
render: (h) => h(App),
router,
}).$mount("#app");
页面
<!-- views/HomePage.vue -->
<template>
<div>home</div>
</template>
<!-- views/CommonPage1.vue -->
<template>
<div>page1</div>
</template>
<!-- views/CommonPage2.vue -->
<template>
<div>page2</div>
</template>
二、Hash 模式
根据应用的部署位置，可以将应用分为直接访问和按路径访问。
- 直接访问：应用被部署在一个域名的根路径上，访问形式 http://www.my-app.com/#/
- 按路径访问：应用被部署在一个子路劲上，访问形式 http://www.my-app.com/vue2/#/
直接访问
执行npm run build，将 dist 目录下的所有文件拷贝到 html 目录下，修改 nginx.conf 配置：
http {
server {
listen 8000;
server_name localhost;
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
}
注意，默认端口为 80，页面访问时会自动省略端口号，如果 80 端口被占用，要么关闭使用 80 端口的应用程序，要么使用其他端口号。
同时要注意，修改 nginx.conf 后一定要重启 Nginx ！！！如果通过命令不能重启 Nginx，可以通过 “任务管理器” 进行重启。
效果预览：
按路径访问
- 修改
vue.config.js文件
const { defineConfig } = require('@vue/cli-service') module.exports =
defineConfig({ transpileDependencies: true, publicPath: './' // 使用相对路径 })
-
将打包后的
dist目录的名称改为 ‘vue2’，拷贝到 nginx/html 目录下。 -
修改 nginx.conf 配置
http {
server {
listen 8000;
server_name localhost;
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /vue2 {
root html/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
}
效果预览
三、History 模式
直接访问
- 将路由模式改为
history
// main.js
const router = new VueRouter({
mode: "history",
routes,
});
- 其他操作与 hash 模式下的 “直接访问” 一致，直接拷贝过来。
执行npm run build，将 dist 目录下的所有文件拷贝到 html 目录下，修改 nginx.conf 配置：
http {
server {
listen 8000;
server_name localhost;
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
}
效果预览
按路径访问
- 将路由模式改为
history，并设置base为/vue2/。
// main.js
const router = new VueRouter({
mode: "history",
base: '/vue2/'
routes
});
- 修改
vue.config.js文件
const { defineConfig } = require('@vue/cli-service') module.exports =
defineConfig({ transpileDependencies: true, publicPath: '/vue2/' //
路径名称要与路由中的 base 保持一致！ })
-
将打包后的
dist目录的名称改为 ‘vue2’，拷贝到 nginx/html 目录下。 -
修改 nginx.conf 配置
http {
server {
listen 8000;
server_name localhost;
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /vue2 {
root html/;
index index.html index.htm;
try_files $uri $uri/ /vue2/index.html;
}
}
}
上面的设置中，/vue2/index.html 中的 /vue2 很关键，如果没有添加，除了 / 路径，其他子路由刷新会报 500 错误。
效果预览
好了，分享结束，谢谢点赞，下期再见。
![[Deepin] Deepin 安装 MEGA](https://i-blog.csdnimg.cn/direct/5e585e67635d457aa10e5b675b09a36a.png)
