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)
    }
})