Implementación en línea del proyecto Vue

Pasos de implementación en línea del proyecto

configurar en router\index.jsarchivomode
inserte la descripción de la imagen aquí

primer paso

Paso 1: empaquete el proyecto vue para generar una carpeta dist: npm run build
inserte la descripción de la imagen aquí

segundo paso

Paso 2: el proyecto empaquetado debe implementarse en el servidor antes de que pueda abrirse
inserte la descripción de la imagen aquí

tercer paso

Paso 3: use nodejs para crear un microservidor local, implemente el proyecto,
cree una nueva carpeta vacía demoy
conviértalo en un paquete legal: npm init
installation express: npm install express
resource deployment: create a new folder demo\static, y coloque los archivos empaquetados y generados en el proyecto vue en el staticclip de archivo hacia abajo
inserte la descripción de la imagen aquí

el cuarto paso

Paso 4: Cree un nuevo archivo principal demo\serve.jsy escriba el siguiente contenido:

// 引入 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('服务器启动成功了!')
})

Inicie el servidor: node server
Acceda al servidor:localhost:5005/person

inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/qq_53810245/article/details/123238831
Recomendado
Clasificación