vue项目打包部署
1.执行npm run build,生成dist文件
2.以node.js搭建的服务器为例,将dist中的文件全部放入服务器中的文件中,如static
代码:
const express = require('express')
const app = express()
app.use(express.static(__dirname + '/static'))
app.listen(5000, (err)=>{
if(!err) console.log('服务器启动了,http://localhost:5000')
})
3.访问地址,正常点击路由切换后,再次刷新浏览器后出现404
原因:路由请求方式为history方式,即 mode: 'history'
解决方式:
1.mode:history改为mode:hash后重新打包部署
2.利用第三插件:connect-history-api-fallback, 网址 https://www.npmjs.com/package/connect-history-api-fallback
① 安装:npm install --save connect-history-api-fallback
② 代码引入:
const express = require('express')
const history = require('connect-history-api-fallback');
const app = express()
app.use(history())
app.use(express.static(__dirname + '/static'))
app.listen(5000, (err)=>{
if(!err) console.log('服务器启动了,http://localhost:5000')
})