Vue project online deployment

Project on-line deployment steps

configure in router\index.jsfilemode
insert image description here

first step

Step 1: Package the vue project to generate a dist folder: npm run build
insert image description here

second step

Step 2: The packaged project must be deployed on the server before it can be opened
insert image description here

third step

Step 3: Use nodejs to build a local micro server, deploy the project,
create a new empty folder demo, and
turn it into a legal package: npm init
installation express: npm install express
resource deployment: create a new folder demo\static, and put the packaged and generated files in the vue project into the staticfile clip down
insert image description here

the fourth step

Step 4: Create a new main file demo\serve.jsand write the following content:

// 引入 express
const express = require('express')
// 引入connect-history-api-fallback
const history = require('connect-history-api-fallback');

// 创建app服务于实例对象——直接调用expres()
const app = express()

// 使用connect-history-api-fallback,必须在传入指定资源之前使用
app.use(history())
// 传入指定资源
app.use(express.static(__dirname+'/static'))
// 配置后端路由
app.get('/person',(req,res)=>{
    
    
	// 给客户端返回数据
	res.send({
    
    
		name:'tom',
		age:18
	})
})

// 端口监听,(端口号,(错误信息)=>{
    
    })
app.listen(5005,(err)=>{
    
    
	if(!err) console.log('服务器启动成功了!')
})

Start the server: node server
Access the server:localhost:5005/person

insert image description here

Guess you like

Origin blog.csdn.net/qq_53810245/article/details/123238831