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服務端，記得啟動網站和對應的應用池