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服务端,记得启动网站和对应的应用池