Vue脚手架打包和部署

原创已于 2022-07-07 16:58:26 修改 · 1.7k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-07-07 16:56:37 首次发布

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何通过npm run build打包前端项目，并利用Node.js和Express进行部署。首先，通过npm run build创建dist文件夹，然后在新文件夹中用Express设置服务器，配置静态资源目录为dist中的static。最后，将打包后的文件移动到static目录，重启服务器，即可完成前端项目的部署。

第一步

终端输入: npm run build 回车之后生产环境
在这里插入图片描述

生产环境完成之后在项目中会多出一个文件，名为：dist ，文件内容如下
在这里插入图片描述
此时打开index.html是看不到内容的,还需要部署服务器

备注：只会打包public 和 src两个文件里的内容

第二步

部署：用的是node.js 和 express

备注：node.js需要去下载安装

1.新建一个文件夹用于存放发布的文件
2.vscode打开
在这里插入图片描述

用express前需要安装变成合法包，终端：npm init

之后一路回车就完事了

接下里安装express，终端：npm i express

此时就以安装完成了

第三步

新建一个服务器主文件：server.js
在这里插入图片描述
代码如下：

// 引入 express
const express = require('express')

//创建一个app服务实例对象
const app = express()//直接调用

//配置一个后端的路由
app.get('/person',(request,response)=>{
    response.send({
        name:'tom',
        Sex:'男'
    })
})

//端口监听,2424端口号,自取的
app.listen(2424,(err)=>{
    if(!err){
        console.log('服务器启动成功了！')
    }
})

启动服务：node server
在这里插入图片描述
测试访问

服务器搭建完成了，可以访问了。

接下来访问页面，创建一个文件夹 static
在这里插入图片描述
server.js 添加

//中间件,指定静态资源
app.use(express.static(__dirname+'/static')) //拼成一个地址

完整图
在这里插入图片描述
终端关闭服务，重新启动：node server。

测试访问页面：
在这里插入图片描述

好了，准备到这了就该把脚手架刚生成的文件放入了

把刚 dist 文件全部复制
在这里插入图片描述
放入上一步创建的 static 文件里

终端关闭服务，重新启动：node server。

测试访问页面：
在这里插入图片描述
好了，完成了。