Vue打包完部署到服务器运行(express、koa)_node koa 启动dist

当Vue项目完成后，就需要打包文件，然后部署到服务器上。

Vue打包完成后会在项目的根目录下生成一个dist文件夹，里面存放了所需的文件，将其部署到服务器上并进行相应配置，即可通过浏览器访问。

express框架

1.安装express和express-generator

npm install express --save
1

npm install express-generator -g (此处为全局安装)
1

2.创建express项目

express expressServer // expressServer: 项目名称
1

3.安装依赖

npm install
1

4.根目录新建app.js文件

const express = require('express')
const path = require('path')
const app = express()
//public是指的放置前端静态资源的文件夹名称
app.use(express.static(path.join(__dirname, 'public')))
app.listen(3000,() => {
    console.log('Listening on port 3000.')
})
1
2
3
4
5
6
7
8

5.将打包文件放到express项目
Vue项目打包：

npm run build
1

复制文件：
打包完成后会在Vue项目的根目录下生成一个dist文件夹，将文件夹下的所有文件复制到express服务下的public文件夹中。

6.运行express，打开浏览器

node app.js或者npm start
1

打开浏览器，输入localhost:3000（此处为express服务器的端口号，3000为例）就可以看到效果了。

koa框架

1.安装koa和koa-generator

npm install koa
1

npm install koa-generator -g (此处为全局安装)
1

2.创建koa项目

koa koaServer // koaServer: 项目名称
1

3.安装依赖

npm install
1

4.根目录新建app.js文件

const Koa = require('koa');
const app = new Koa()
//public是指的放置前端静态资源的文件夹名称
app.use(require('koa-static')(__dirname + '/public'))
app.listen(3000)
1
2
3
4
5

5.将打包文件放到koa项目
Vue项目打包：

npm run build
1

复制文件：
打包完成后会在Vue项目的根目录下生成一个dist文件夹，将文件夹下的所有文件复制到koa服务下的public文件夹中。

6.运行koa，打开浏览器

node app.js或者npm start
1

打开浏览器，输入localhost:3000（此处为express服务器的端口号，3000为例）就可以看到效果了。