我按照this article将应用程序部署到heroku . 它的工作水平很低 .
该应用程序使用vue-router . 单个应用程序应用程序的常见之处在于,如果我们首先不首页来引导框架,则路由不起作用 .
由于我使用Express.js为应用程序创建服务器(没有后端),因此我创建了一个通配符路由,将index.html服务器路由到所有路由 . 因此,如果用户输入/ some-route,express.js服务器将引导框架的index.html,那么它应该计算出如何为该路由提供组件 .
server.js
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'))
})
的index.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
没有工作,一切都有效 . 该页面是空白的 .
所以我想,也许我应该手动将构建的脚本添加到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应用程序仍然有效? -
如何处理 生产环境 中的路由,在此caes,Heroku中,以便用户不需要首先进入根路由来引导框架 . 他们可以去/某路线,一切都应该工作 .
2 回答
我现在使用https://nuxtjs.org/来处理服务器端渲染 . 而且我不需要担心路由 .
这是一个适合您的
server.js
文件: