vue默认使用的是hash模式的路由,不用我们配置操作,但是链接中带着一个#,影响美观,所以项目上线会切换为history模式,现在简单记录一下操作步骤及遇到的坑。

路由模式

分为2种路由模式
(1) hash模式,监听location.hash的改变,然后切换页面
优点:简单,不需要服务支持
缺点:丑
(2)history模式,监听history.pushState的调用,然后切换页面
优点:漂亮
缺点:还需要后台配置支持
详情:https://router.vuejs.org/zh/guide/essentials/history-mode.html

上线基本步骤

1.使用路由模式

在src/router/index.js

let router = new VueRouter({ 
    mode: 'history',
    routes
 });

2.项目打包

npm run build

生成一个dist文件夹

3.用node.js上线项目

• 3.1 新建vue-server文件夹
• 3.2 npm init -y生成package.json
• 3.3 npm i express
• 3.4 复制dist到vue-server里面
• 3.5 写app.js

const express = require('express')
const app = express()
//静态页面托管
app.use(express.static('./dist'))

app.listen(80, ()=>{
    console.log('程序运行在http://localhost:80')
})

运行程序

node app.js

遇到问题

1.刷新页面一片空白

上线项目我们打开之后发现,页面打不开,空白,并报错

参考资料:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%9F%BA%E4%BA%8E-node-js-%E7%9A%84-express

解决办法

• 1.1 安装依赖npm install --save connect-history-api-fallback
• 1.2 修改app.js

const express = require('express')
const app = express()
const history = require('connect-history-api-fallback');
//使用history中间件
// 注意:history中间件要在静态托管前面
app.use(history())
//静态页面托管
app.use(express.static('./dist'))
app.listen(80, ()=>{
    console.log('程序运行在http://localhost:80')
})

2.点击请求等出现404错误

错误原因:缺少服务器代理

参考资料

• 在node.js当中用服务器代理(之前在vue的cli里面devServer里面用了代理),去npm上面搜索express proxy,发现npm上面有很多proxy模块,选择devSever用的一样的模块
• 怎么知道devServer用得是哪个模块,去webpack的官网,具体地址:https://webpack.docschina.org/configuration/dev-server/#devserverproxy**
  **最终选择https://www.npmjs.com/package/http-proxy-middleware

解决办法

• 2.1安装依赖npm i http-proxy-middleware
• 2.2修改app.js

const express = require('express')
const app = express()
const history = require('connect-history-api-fallback');
const { createProxyMiddleware } = require('http-proxy-middleware');
//使用history中间件
// 注意:history中间件要在静态托管前面
app.use(history())
//静态页面托管
app.use(express.static('./dist'))
//使用proxy中间件
//拦截/api
app.use('/api', createProxyMiddleware({
    target: 'http://192.168.21.102:3000',
    changeOrigin: true,
}));
app.listen(80, ()=>{
    console.log('程序运行在http://localhost:80')
})

这里配置和开发环境配置代理一样,因为我们安装的是匹配dev的依赖

到这里就完成了操作了,页面打开就没啥问题了。