• 欢迎光临~

【Vue】Vue项目打包上线流程--20221219

开发技术 开发技术 2022-12-24 次浏览

Vue项目打包上线流程

我的链接https://blog.csdn.net/m0_46629123/article/details/128371149

1.打包

npm run build

2.准备服务器

1.准备demo文件夹,并CMD输入npm init
【Vue】Vue项目打包上线流程--20221219

2.CMD输入npm i express
【Vue】Vue项目打包上线流程--20221219
3.新建并编辑server.js
【Vue】Vue项目打包上线流程--20221219
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
【Vue】Vue项目打包上线流程--20221219
5.输入http://127.0.0.1:5005/person/,服务器正常运行。
【Vue】Vue项目打包上线流程--20221219
6.新建static,新建demo.html
【Vue】Vue项目打包上线流程--20221219
7.让服务器认识static文件夹
【Vue】Vue项目打包上线流程--20221219
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,呈现页面如下
【Vue】Vue项目打包上线流程--20221219
9.服务器准备到这个程度,就可以准备部署了。

3.部署:拷贝打包文件

1.将dist文件夹中的css、js、favicon.ico、index.html复制到static文件夹中。
【Vue】Vue项目打包上线流程--20221219
2.务必重启服务器 node server,访问http://127.0.0.1:5005,呈现页面如下。
【Vue】Vue项目打包上线流程--20221219

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
【Vue】Vue项目打包上线流程--20221219
3.修改server.js,引入connect-history-api-fallback插件
【Vue】Vue项目打包上线流程--20221219
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
【Vue】Vue项目打包上线流程--20221219

程序员灯塔
转载请注明原文链接:【Vue】Vue项目打包上线流程--20221219
喜欢 (0)