vue打包, 生成dist文件
npm run build
生成的dist文件，直接打开里面的index.html，页面是无法正常展示的, 需要部署服务器
node.js + express框架
新建项目
- 创建文件夹nodeServer
- 终端进入文件夹nodeServer
-
初始化 npm init 进行创建配置文件package.json(一路回车到底)
image.png
安装express
npm i express
放入打好的包
将打好的宝dist放入nodeServer根目录下
创建server.js
在nodeServer创建server.js文件(server可以随意命名), 填写以下内容
// 引入express
const express = require('express')
// 调用express,创建一个app 服务实例对象
const app = express()
// dist 是项目的打包资源路径
app.use(express.static(__dirname+'/dist'))
// 配置后端路由
app.get('/person', (req, res) => {
console.log('访问到了')
// 给客户端返回东西
res.send({
name: '张三',
age:20
})
})
// 本机ip
const hostname = '192.168.10.30';
// 端口号
const port = 8181;
// 设置端口监听
app.listen(port, (err) => {
if (!err){
console.log('服务器启动成功了！')
console.log(`Server running at http://${hostname}:${port}/`);
} else {
err && console.log(err)
}
})
启动服务器
node server.js
或者
node server(就是上面创建的文件名)
访问
浏览器输入http://192.168.10.30:8182/
image.png
如果设置的路由器的工作模式是hash模式，那么到这一步就完结了!！
vue路由模式为history丢失部分路由
问题描述:
通过主页点击跳转到其他页面时，可以正常显示
但是刷新该页面，就会报 404或者cannot get /
原因
- 点击跳转时，不会发送网络请求，前端路由器带动页面、url变化
- 但刷新时，会发送网络请求。 把后面的路径当成资源，去请求服务器，而服务器下没有 /login 这个资源，所以就报错了
- hash模式时，不会把#/及后面的路径当成资源，去请求服务器
解决
- 采用connect-history-api-fallback中间件来解决
- https://v3.router.vuejs.org/zh/guide/essentials/history-mode.html
安装 connect-history-api-fallback
npm install --save connect-history-api-fallback
引入connect-history-api-fallback
var history = require('connect-history-api-fallback');
完整server.js
// 引入express
const express = require('express')
// 引入connect-history-api-fallback
const history = require('connect-history-api-fallback');
// 调用express,创建一个app 服务实例对象
const app = express()
// 注意：必须写在指定静态资源前
app.use(history())
// 指定静态资源
app.use(express.static(__dirname+'/dist'))
// 配置后端路由
app.get('/person', (req, res) => {
console.log('访问到了')
// 给客户端返回东西
res.send({
name: '张三',
age:20
})
})
// 本机ip
const hostname = '192.168.10.30';
// 端口号
const port = 8181;
// 设置端口监听
app.listen(port, (err) => {
if (!err){
console.log('服务器启动成功了！')
console.log(`Server running at http://${hostname}:${port}/`);
} else {
err && console.log(err)
}
})
