Vue + ElementUI的电商管理系统实例28 项目上线-通过node创建web服务器

项目上线

1、项目上线相关配置

创建 node 项目，并安装 express，通过 express 快速创建 web 服务器，将 vue 打包生产的 dist 文件夹，托管为静态资源即可，关键代码如下：

const express = require('express')
// 创建 web 服务器
const app = express()

// 托管静态资源
app.use(express.static('./dist'))

//启动 web 服务器
app.listen(80, () => {
  console.log('web server running at http://127.0.0.1')
})

新建 vue_shop_server 文件夹，用 VScode 打开，然后调用终端，输入：

npm init -y

初始化一个包管理配置文件。

然后安装 express，输入：

npm i express -S

安装完成后，把我们前面打包生成的 dist 目录，拷贝到 vue_shop_server 目录下。并新建 app.js 入口文件：

先导入 express。

const express = require('express')
// 创建 web 服务器
const app = express()

// 托管静态资源
app.use(express.static('./dist'))

//启动 web 服务器
app.listen(80, () => {
  console.log('web server running at http://127.0.0.1')
})

为了测试服务器能不能正常的运行，可以在终端里输入：

node app.js

当终端里可以正常打印出“web server running at http://127.0.0.1”，就证明服务器启动成功了。

然后打开浏览器，输入 http://127.0.0.1

发现可以正常访问。

注意：如果样式有问题的，就把 index.html 文件中的 element-ui 的js文件放在最后面，就可以了。