Vue-router启用history模式下的开发及非根目录部署方法

当使用 Vue.js 进行单页应用(SPA)开发后，我们通常使用vue-router来管理路由。Vue-router中默认使用Hash模式来实现路由跳转，即把路由信息放到URL的hash值中。但在实际使用中我们经常希望使用history模式，即把路由信息放到URL的路径中，这样URL更加直观、美观。本文将给出vue-router使用history模式的完整攻略，包括如何在非根路径下部署应用。

启用history模式

启用history模式很简单，只需要在创建router实例时传递一个mode参数即可，如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history', //启用history模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    //其他路由
  ]
})

由于使用history模式，我们需要在服务端进行相应的配置，确保所有路径都返回同一个HTML文件，并在其中加载Vue应用，否则用户首次访问某个子页面时将会收到404错误。可以使用Apache或NGINX实现这个功能，也可以使用Node.js的express、Koa等Web框架来实现。这里以Node.js的express为例进行说明。假设我们的Vue应用已经打包发布到了/dist目录下，我们需要按照以下方式配置express应用：

const express = require('express')
const path = require('path')
const app = express()

//加载Vue应用
app.use(express.static(path.join(__dirname, 'dist')))

//其他路由返回同一个HTML文件
app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, 'dist/index.html'))
})

app.listen(3000)

使用以上配置，对于所有的请求，express都会返回dist/index.html文件，并在其中加载Vue应用。

非根目录部署

如果我们希望在非根目录下部署Vue应用，例如http://localhost/myapp/home，那么需要进行相应的配置。

配置Vue-router

首先，我们需要在Vue-router中将路径前缀设置为/myapp，如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: '/myapp/', //设置路径前缀
  routes: [
    {
      path: 'home',
      name: 'home',
      component: Home
    },
    //其他路由
  ]
})

在base中设置路径前缀为/myapp/，在其他路由中都省略该前缀。

配置express应用

接下来我们需要配置express应用，让它能够正确处理请求。由于我们将Vue应用部署到/myapp目录下，因此需要将所有的路由请求都重定向到/myapp目录下。重定向的工作可以使用express中间件来实现，代码如下：

const express = require('express')
const path = require('path')
const app = express()

//加载静态资源
app.use('/myapp', express.static(path.join(__dirname, 'dist')))

//重定向所有的请求到/myapp目录下
app.use(function(req, res, next) {
  res.redirect('/myapp' + req.url)
})

//其他路由返回同一个HTML文件
app.get('/myapp/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'dist/index.html'))
})

app.listen(3000)

上述代码中，我们首先使用express.static中间件加载静态资源。注意此处路径前缀应该为/myapp，即静态资源文件夹的实际路径为/dist/myapp。然后使用一个中间件将所有请求都重定向到/myapp目录下。最后，我们使用一个路由将所有以/myapp开头的请求都返回dist/index.html文件。

使用以上方法，我们就可以在非根目录下方便地部署Vue应用了。

示例说明

以下是两个示例，一个是在根目录下部署Vue应用，一个是在非根目录下部署Vue应用。

在根目录下部署Vue应用

Vue应用代码如下：

<!--App.vue-->
<template>
  <div>
    <h1>这是首页</h1> <!--路由路径为/-->
    <router-link to="/about">关于我们</router-link> <!--路由路径为/about-->
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

路由配置如下：

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

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

然后使用Vue CLI进行打包。打包完成后，我们得到了一个dist目录。将dist目录下的所有文件上传到服务器，然后在服务器上启动一个express应用，并将所有路由请求重定向到/dist目录下。代码如下：

const express = require('express')
const path = require('path')
const app = express()

//加载静态资源
app.use(express.static(path.join(__dirname, 'dist')))

//重定向所有的请求到/dist目录下
app.use(function(req, res, next) {
  res.redirect('/dist' + req.url)
})

//其他路由返回同一个HTML文件
app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, 'dist/index.html'))
})

app.listen(3000)

以上代码中，我们将Vue应用部署在/dist目录下，express将所有静态资源请求映射到/dist目录下。路由请求都重定向到/dist目录下，具体实现如上述代码所示。

在非根目录下部署Vue应用

Vue应用代码如下：

<!--App.vue-->
<template>
  <div>
    <h1>这是首页</h1> <!--路由路径为/myapp/-->
    <router-link to="/myapp/about">关于我们</router-link> <!--路由路径为/myapp/about-->
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

路由配置如下：

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

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: '/myapp/',
  routes: [
    {
      path: '',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

打包完成后，将dist文件夹下的所有文件上传到服务器上/myapp目录下。然后在服务器上启动一个express应用，将所有的请求重定向到/myapp目录下，并将所有/myapp路由请求返回/dist/index.html文件。

const express = require('express')
const path = require('path')
const app = express()

//加载静态资源
app.use('/myapp', express.static(path.join(__dirname, 'dist')))

//重定向所有的请求到/myapp目录下
app.use(function(req, res, next) {
  res.redirect('/myapp' + req.url)
})

//其他路由返回同一个HTML文件
app.get('/myapp/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'dist/index.html'))
})

app.listen(3000)

以上就是Vue-router启用history模式下的开发及非根目录部署方法的完整攻略。