vue项目打包部署

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')
})