Vue 项目hash和history模式打包部署与服务器配置

你好，我是沐爸，欢迎点赞、收藏、评论和关注。

在开发 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 错误。

效果预览
在这里插入图片描述