vue 路由采用了history模式，为了避免页面跳转刷新空白的问题，服务端的配置

前端的相关要点配置（这个根据实际情况做相应调整）

1、vue.config.js 中的 配置：

const webpack = require("webpack");
module.exports = {
    assetsDir: './',
    publicPath: '/',
    outputDir: './dist',
　　　 ...
｝

2、router 的配置：

export default new Router({
    mode: 'history',
    base: "/dist/",
    ...
}

 

备注：vue.config.js中的 outputDir的命名    要和    router 中的base的命名要一样

 

-------------------------------------------------------------------------分割线-------------------------------------------------------------------

 

node 服务端的配置：

1、在本地新建一个命名为nodeWeb的文件夹（名字自己随意取）

2、把打包好的dist文件夹整个放到 nodeWeb 文件夹下

3、安装 "connect-history-api-fallback" ---- npm install connect-history-api-fallback

 

 4、在 nodeWeb 文件夹下新建文件 app.js

//app.js

var connectHistoryApiFallback = require('connect-history-api-fallback')
var express = require('express')
 
var app = require('express')()
var server = require('http').createServer(app)
 
server.listen(3000, function () {
  // var host = server.address().address
    var host = '127.0.0.1'
  var port = server.address().port
 
  console.log('应用实例，访问地址为 http://%s:%s', host, port)
})
// 由js控制路由，一定要写在express.static前面！！！
app.use('/', connectHistoryApiFallback())
app.use(express.static('./dist'))
 
app.get('/', function (req, res) {
  // eslint-disable-next-line no-path-concat
  res.sendFile(__dirname + '/index.html')
})

5、在nodeWeb目录下运行 ：node app

 

 -----------------------------------------------------------------------分割线---------------------------------------------------------------

 

tomcat 服务端的配置：

注：这里有两种情况，第一种是直接访问服务下的文件，第二种是访问服务下的指定文件夹下的文件。第一种vue.config 中的 publicPath 是 '/'  ，第二种是 vue.config 中的 publicPath 是 './' ，所以记得做相应的修改，不然会找不到静态资源。

我下面的例子是访问服务下的指定文件，所以publicPath要修改为 './' 

1、把打包好的dist文件夹拖到 webapps 文件夹中

 

 2、在dist文件夹中新建一个命名为WEB-INF的文件夹，并在此文件夹下文件一个web.xml 的文件，文件内容如下：

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">

  <display-name>webapp</display-name>
  <description>
     webapp
  </description>
  <error-page>  
   <error-code>404</error-code>  
   <location>/</location>  
</error-page>  
</web-app>

3、启动tomcat ，在 C:\apache-tomcat-7.0.70\bin 目录下，双击 startup.bat  文件，即可启动

 

----------------------------------------------------------------分割线--------------------------------------------------------------

 

IIS 服务端的配置：

1、将打包好的dist整个文件夹放到 C:\inetpub\wwwroot

 

 

2、在dist文件夹下新建文件 web.config ,内容如下：

 

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="./" /> 
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

 

 

注：这里有两种情况，第一种是直接访问服务下的文件，第二种是访问服务下的指定文件夹下的文件。

第一种：直接访问服务下的文件，那么vue.config 中的 publicPath 修改为 '/' ，对应的 web.config 的 <action type="Rewrite" url="/" />

第二种：直接访问服务下的指定文件夹下的文件，那么vue.config 中的 publicPath 修改为 './' ，对应的 web.config 的 <action type="Rewrite" url="./" />

另外：iis服务端，记得启动网站和对应的应用池