Vue项目打包后部署到express服务器
2020-01-14 21:19
555 查看
Vue项目打包后部署到express服务器
Express是基于Node.js平台,快速,开放,极简的Web开发框架,如果前端需要服务器部署自己的项目,可以使用express
首先在vue项目安装 express
npm install express -save
然后根目录下新建app.js文件
const express = require('express') const path = require('path') const app = express() app.use(express.static(path.join(__dirname, 'dist'))) app.listen(8081, () => { console.log('app listening on port 8081') })
修改packge.json文件配置
添加 “start”: “node app.js”
"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "start": "node app.js" },执行 npm run start 运行服务器,打开浏览器输入 localhost:8081 便可以访问到项目
注意:如果使用vue-router的history模式,需要使用connect-history-api-fallback中间件
官方解释: 当你使用 history 模式时,URL 就像正常的 url,不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问地址栏中的文件 就会返回 404,这就不好看了。
所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
首先安装 connect-history-api-fallback
npm install --save connect-history-api-fallback
然后在 APP.js中引入使用
const express = require('express') const path = require('path') const app = express() // vue-router history模式引入connect-history-api-fallback中间件 const history = require('connect-history-api-fallback') // 这句代码需要放在express.static上面 app.use(history()) app.use(express.static(path.join(__dirname, 'dist'))) app.listen(8081, () => { console.log('app listening on port 8081') })
- 点赞 2
- 收藏
- 分享
- 文章举报
相关文章推荐
- vue项目打包部署到tomcat或nginx服务器
- 部署vue+express+MongoDB项目至服务器流程
- vue项目打包部署到服务器的方法示例
- vue 打包后的文件部署到express服务器上的方法
- Vue项目webpack打包部署到服务器
- Vue项目webpack打包部署到服务器
- Vue项目webpack打包部署到服务器的实例详解
- Vue项目打包部署到iis服务器的配置方法
- 把vue-router和express项目部署到服务器的方法
- vue-router和express项目部署到服务器
- 记录一次vue+springboot项目打包部署到服务器上
- vue项目打包并部署到服务器
- vue 打包之后的文件如何部署到express服务器上
- vue项目打包部署介绍
- 使用webpack打包后的vue项目如何运行(express)
- Maven打包Web 项目并且部署到Linux上的Tomcat服务器下
- vue项目部署到nginx服务器
- Vue项目build打包部署到Tomcat后,刷新报404错误解决方案
- vue项目加了vue-router懒加载,打包后在服务器上访问,报错Loading chunk 40 failed. 解决办法
- springboot web项目打包成 jar包部署在服务器