返回

Vue.js 项目二级目录部署的 History 模式路由配置全攻略

前端

准备

在开始之前，请确保您已经完成以下步骤：

  • 安装 Node.js 和 npm。
  • 安装 Vue.js CLI。
  • 启动一个 Vue.js 项目。

配置路由

首先，在 router.js 或 src/router.js 中配置路由器。请确保使用 History 模式路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = new VueRouter({
  routes,
  mode: 'history',
  base: '/main',
});

export default router;

在上面的代码中，我们指定 base 选项为 /main，这表示我们的 Vue.js 应用程序将在服务器的二级目录 /main 中运行。

项目前置设置

在 vue.config.js 中，设置 publicPath 选项，指定部署的二级目录：

module.exports = {
  publicPath: '/main/',
};

部署

最后，可以使用 npm run build 或 yarn build 命令打包您的 Vue.js 应用程序。打包后的文件可以部署到服务器的 /main 目录中。

注意事项

在部署到服务器之前，请确保已经设置好虚拟主机，以便能够将二级目录映射到您的 Vue.js 应用程序。您可能还需要在服务器上安装 Nginx 或 Apache，以便能够处理重定向和路由。

结论

通过遵循本指南，您现在应该能够将 Vue.js 项目部署到服务器二级目录，并使用 History 模式路由。如果您有任何问题或需要进一步的帮助，请随时评论或联系我。