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

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

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

1 const webpack = require("webpack");
2 module.exports = {
3     assetsDir: './',
4     publicPath: '/',
5     outputDir: './dist',
    ... 6

2、router 的配置:

1 export default new Router({
2     mode: 'history',
3     base: "/dist/",
4     ...
5 }

 

备注: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

 1 //app.js
 2 
 3 var connectHistoryApiFallback = require('connect-history-api-fallback')
 4 var express = require('express')
 5  
 6 var app = require('express')()
 7 var server = require('http').createServer(app)
 8  
 9 server.listen(3000, function () {
10   // var host = server.address().address
11     var host = '127.0.0.1'
12   var port = server.address().port
13  
14   console.log('应用实例,访问地址为 http://%s:%s', host, port)
15 })
16 // 由js控制路由,一定要写在express.static前面!!!
17 app.use('/', connectHistoryApiFallback())
18 app.use(express.static('./dist'))
19  
20 app.get('/', function (req, res) {
21   // eslint-disable-next-line no-path-concat
22   res.sendFile(__dirname + '/index.html')
23 })

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

 

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

 

tomcat 服务端的配置:

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

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

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

 

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

 1 <?xml version="1.0" encoding="ISO-8859-1"?>
 2 <web-app xmlns="http://java.sun.com/xml/ns/javaee"
 3   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 4   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
 5                       http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
 6   version="3.0"
 7   metadata-complete="true">
 8 
 9   <display-name>webapp</display-name>
10   <description>
11      webapp
12   </description>
13   <error-page>  
14    <error-code>404</error-code>  
15    <location>/</location>  
16 </error-page>  
17 </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服务端,记得启动网站和对应的应用池

 

posted @ 2020-10-23 18:08  秃头的铲屎官  Views(3532)  Comments(0Edit  收藏  举报