Jos*_*ung 4 heroku express vue.js vue-router vuejs2
我按照这篇文章将应用程序部署到heroku。它在最低水平上工作。
该应用程序使用 vue-router。单个应用程序应用程序的常见问题是，如果我们不首先访问主页来引导框架，则路由将不起作用。
由于我使用 Express.js 为没有后端的应用程序创建服务器，因此我创建了一个通配符路由来将 index.html 服务到所有路由。因此，如果用户输入 /some-route，express.js 将提供将引导框架的 index.html，然后它应该确定如何为该路由提供组件。
服务器.js
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'))
})
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>front</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.min.js" crossorigin="anonymous"></script>
</body>
</html>
Server.js它起作用了。index.html 被发送到每个路由。但该页面是空白的，因为index.html没有脚本（例如 dist/app.js）来引导 vue.js 框架。
问题是，如果我只转到根路由，我就不需要脚本。即使index.html没有内置的 app.js 脚本，一切都可以正常工作。如果我走其他路线就不行了。该页面是空白的。
所以我想，也许我应该手动将构建的脚本添加到 index.html 中。然而，当 Heroku 构建应用程序时，每个构建的文件都有一个版本号，如下所示：
remote: > node build/build.js
remote:
remote:
remote: Starting to optimize CSS...
remote: Processing static/css/app.0b5f04e14ffb7ccea3fa9f8f33ffbb29.css...
remote: Processed static/css/app.0b5f04e14ffb7ccea3fa9f8f33ffbb29.css, before: 2008, after: 1940, ratio: 96.61%
remote: Hash: f26c9282218b6a3fa3a5
remote: Version: webpack 2.4.1
remote: Time: 12380ms
remote: Asset Size Chunks Chunk Names
remote: static/js/app.629caa4c18bbb9036878.js 21.1 kB 0 [emitted] app
remote: static/js/vendor.32e38f7fbd283989a03f.js 199 kB 1 [emitted] vendor
remote: static/js/manifest.d0cfe9987077f3610ffd.js 1.5 kB 2 [emitted] manifest
remote: static/css/app.0b5f04e14ffb7ccea3fa9f8f33ffbb29.css 1.94 kB 0 [emitted] app
remote: static/js/app.629caa4c18bbb9036878.js.map 99 kB 0 [emitted] app
remote: static/css/app.0b5f04e14ffb7ccea3fa9f8f33ffbb29.css.map 4.7 kB 0 [emitted] app
remote: static/js/vendor.32e38f7fbd283989a03f.js.map 2.24 MB 1 [emitted] vendor
remote: static/js/manifest.d0cfe9987077f3610ffd.js.map 14.4 kB 2 [emitted] manifest
remote: index.html 1.45 kB [emitted]
remote:
remote: Build complete.
所以我不能只添加static/js/app.js到index.html。
所以现在我被困住了。
为什么当我进入根路径时，即使index.html不包含构建的应用程序脚本，vue.js 应用程序仍然可以工作？
如何在生产中处理路由，在这种情况下，Heroku，这样用户就不需要先转到根路由来引导框架。他们只需转到 /some-route 即可，一切都应该正常。
这是一个server.js应该适合您的文件：
var express = require('express')
var history = require('connect-history-api-fallback')
var path = require('path')
var serveStatic = require('serve-static')
var app = express()
// Use a fallback for non-root routes (required for Vue router)
// NOTE: History fallback must be "used" before the static serving middleware!
app.use(history({
// OPTIONAL: Includes more verbose logging
verbose: true
}))
// Serve static assets from the build files (images, etc)
app.use(serveStatic(path.join(__dirname, '/dist')))
var port = process.env.PORT || 5000
app.listen(port, () => {
console.log('Server started at http://localhost:5000')
})
| 归档时间： |
|
| 查看次数： |
2628 次 |
| 最近记录： |