【Vue】Vue项目打包上线流程--20221219
Vue项目打包上线流程
我的链接https://blog.csdn.net/m0_46629123/article/details/128371149
1.打包
npm run build
2.准备服务器
1.准备demo文件夹，并CMD输入npm init
2.CMD输入npm i express
3.新建并编辑server.js
server.js
const express = require('express')
const app = express()
app.get('/person',(req,res)=>{
res.send({
namme:'tom',
age:18,
})
})
app.listen(5005,(err)=>{
if(!err) console.log('服务器启动成功了!')
})
4.CMD输入node server
5.输入http://127.0.0.1:5005/person/，服务器正常运行。
6.新建static，新建demo.html
7.让服务器认识static文件夹
server.js
const express = require('express')
const app = express()
app.use(express.static(__dirname+'/static'))
app.get('/person',(req,res)=>{
res.send({
namme:'tom',
age:18,
})
})
app.listen(5005,(err)=>{
if(!err) console.log('服务器启动成功了!')
})
8.务必重启服务器，访问http://127.0.0.1:5005/demo.html，呈现页面如下
9.服务器准备到这个程度，就可以准备部署了。
3.部署：拷贝打包文件
1.将dist文件夹中的css、js、favicon.ico、index.html复制到static文件夹中。
2.务必重启服务器 node server，访问http://127.0.0.1:5005，呈现页面如下。
4.路由器模式变更：避免history模式出现404问题
1.在router/index.html标记mode:'history'
router/index.html
const router = new VueRouter({
// mode:'hash',
mode:'history',
...
})
2.安装兼容库npm i connect-history-api-fallback
3.修改server.js，引入connect-history-api-fallback插件
server.js
const express = require('express')
const history = require('connect-history-api-fallback')
const app = express()
app.use(history())
app.use(express.static(__dirname+'/static'))
app.get('/person',(req,res)=>{
res.send({
namme:'tom',
age:18,
})
})
app.listen(5005,(err)=>{
if(!err) console.log('服务器启动成功了!')
})
4.重新打包npm run build，拷贝到static文件夹，重启服务器node server
