vue项目打包后本地运行dist的方法(2个方法,都很简单)

4,038 阅读1分钟

方法一:创建一个js文件直接运行(超简单)

1. 一般打包完成后会在项目[根目录]生成一个 dist 文件夹,此时,我们在项目根目录新建一个 js 文件(server.js 为例)

image.png

server.js 中代码如下:

const express = require('express')
const app = express()
const port = 8888 // 自定义端口号(不要与已存在端口冲突)
app.use(express.static('dist')) // dist 是项目的打包资源路径
app.listen(port, () => console.log(`服务器 ${port} 开启成功!`))

注意:

  • 若打包文件夹 dist 在项目根目录,直接 app.use(express.static('dist')) 就行了;
  • 若打包文件夹 dist 不在项目根目录,就自行调整, app.use(express.static('/sty/dist'))*

2.在项目根目录下运行node命令启动server.js

node server.js

image.png

  • 成功就会提示服务开启成功
  • 如果未开启服务器成功,很可能是因为你没装 express,此时运行 npm i express 安装下即可

3.打开浏览器,输入localhost:8888就可以本地运行查看dist 文件夹的打包

image.png

方法二:搭建express本地服务器

1.全局安装express-generator

npm i express-generator -g

2.创建一个express项目

express 项目名

3.进入项目目录,安装相关依赖包

  • cd 项目名
  • npm i

4.生成文件添加到express项目中,然后启动express项目

  • 将Vue打包后生成的dist文件夹目录下所有的文件复制到express项目的public文件夹下
  • 运行npm start 来启动express项目

5.打开浏览器,输入localhost:3000就可以本地运行查看dist 文件夹的打包

  • 默认3000端口
  • 打开配置文件./bin/www设置你的IP和端口

image.png