本地运行vue dist文件的两种方式

3,675 阅读1分钟

一:

1、安装express本地服务器 express默认端口3000

npm install -g express-generator

2、创建本地服务器

在某个盘符下运行 

express myProject

其中,myProject为最终服务器文件夹名称,可自定义。

本地项目生成以后进入项目,cd myProject

进入项目之后使用

 npm i 

安装依赖

到此,本地服务创建完成

3、运行vue打包项目

将vue打包生成的dist目录下的文件复制粘贴到上图public目录下(如图所示):

运行:

npm start

打开浏览器,输入http://localhost:3000,  即可看到项目在上线后的效果了。

二:

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

server.js 中代码如下:

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

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

node server.js