【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