在非域名根目录下部署 Vue 项目**

序言

部署 Vue 项目时，通常会将其部署到域名的根目录下。然而，有时需要将其部署到非根目录。本文将介绍如何在非域名根目录下部署 Vue 项目。

修改 vue.config.js 配置文件

要将 Vue 项目部署到非根目录，需要修改项目的 vue.config.js 配置文件。在该文件中，找到publicPath属性并将其设置为所需部署路径。例如，如果要将项目部署到 /vue-app 下，则将 publicPath 设置为 '/vue-app/'。

module.exports = {
  publicPath: '/vue-app/',
};

修改路由配置

接下来，需要修改 vue-router 中的 base 属性。base 属性指定了应用程序的根 URL。默认情况下，该值为 '/'. 如果将项目部署到 /vue-app 下，则需要将 base 设置为 '/vue-app/。

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  base: '/vue-app/',
  routes: [
    {
      path: '/',
      component: App,
    },
  ],
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

HTML5 History 模式

在某些情况下，可能需要启用 HTML5 history 模式。这将删除 URL 中的哈希 (#)。要在 vue-router 中启用 history 模式，请将 mode 属性设置为 'history'。

const router = new VueRouter({
  mode: 'history',
  base: '/vue-app/',
  routes: [
    {
      path: '/',
      component: App,
    },
  ],
});

结论

通过修改 vue.config.js 配置文件和设置 vue-router 中的 base 属性，可以轻松地将 Vue 项目部署到非域名根目录。这为更灵活的部署选项提供了便利，允许将 Vue 项目集成到更复杂的 Web 应用程序中。