Vue项目打包部署与路由配置深度解析

在Vue.js项目的开发和部署过程中，配置打包路径和路由模式是两个至关重要的环节。下面，我们将详细探讨如何根据需求将Vue项目打包部署到域名的根路径或二级路径，并深入解析hash路由与history路由的配置方法。

一、Vue项目打包部署

1. 配置vue.config.js

vue.config.js是Vue CLI项目的配置文件，用于定制项目构建过程中的各种选项。其中，publicPath属性决定了打包后静态资源的路径前缀。

• 部署到根路径：

  如果希望将Vue项目部署到域名的根路径（如https://yourdomain.com/），则应将publicPath设置为'/'（这是默认值，通常无需显式设置）。

  module.exports = {
    publicPath: '/' // 默认值，无需显式设置
  };

• 部署到二级路径：

  如果希望将Vue项目部署到域名的二级路径（如https://yourdomain.com/cms/），则应将publicPath设置为对应的路径（如'/cms/'）。

  module.exports = {
    publicPath: '/cms/'
  };

2. 打包与部署

在配置好vue.config.js后，使用npm run build命令进行打包。打包完成后，会在项目根目录下生成一个dist文件夹，里面包含了所有静态资源文件。将这些文件上传至服务器上的指定目录，并根据服务器类型（如Nginx、Apache等）进行相应的配置。

3. 服务器配置示例（Nginx）

以Nginx为例，下面展示了如何为Vue项目配置Nginx以支持根路径和二级路径的部署。

• 根路径部署：

  server {
    listen 80;
    server_name yourdomain.com;
  
    location / {
      root /path/to/your/vue/dist;
      try_files $uri $uri/ /index.html; # 捕获所有路由，并返回index.html
    }
  }

• 二级路径部署：

  server {
    listen 80;
    server_name yourdomain.com;
  
    location /cms {
      alias /path/to/your/vue/dist; # 注意是alias，不是root
      try_files $uri $uri/ /cms/index.html; # 捕获所有/cms/开头的路由，并返回/cms/index.html
    }
  }

二、Vue路由配置

1. hash路由

hash路由是Vue Router的默认模式，它通过URL中的#符号来表示路由路径。这种模式下，页面刷新时不会导致404错误，因为服务器会将所有请求都重定向到index.html（前提是服务器已正确配置）。

• 配置方法：

  在Vue Router的配置中，无需显式设置mode属性（或将其设置为'hash'），即可使用hash路由。

  import Vue from 'vue';
  import Router from 'vue-router';
  import Home from '@/components/Home.vue';
  
  Vue.use(Router);
  
  export default new Router({
    // mode: 'hash', // 可选，因为'hash'是默认值
    routes: [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      // 其他路由配置...
    ]
  });

2. history路由

history路由使用浏览器的History API来修改URL，而不带#符号。这种模式下，页面刷新时需要服务器能够正确处理前端路由，否则会导致404错误。

• 配置方法：

  在Vue Router的配置中，将mode属性设置为'history'，并根据项目部署路径设置base属性（如果部署在根路径，则无需设置base）。

  export default new Router({
    mode: 'history',
    // base: '/cms', // 如果部署在二级路径，则设置该属性为对应的路径
    routes: [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      // 其他路由配置...
    ]
  });

• 服务器配置：

  使用history路由时，必须确保服务器能够捕获所有前端路由请求，并将它们重定向到index.html（或对应的入口文件）。这通常通过服务器的重写规则或代理配置来实现。

总结

通过合理配置vue.config.js和Vue Router，以及正确设置服务器端的代理规则，你可以轻松地将Vue应用部署到域名的根路径或二级路径，并自由选择使用hash路由或history路由。

在配置过程中，务必注意服务器端的支持情况，以确保前端路由能够正常工作。希望这篇深度解析能够帮助你更好地理解和配置Vue项目的部署和路由。

本文由mdnice多平台发布