文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使Vue.js应用程序与路由工作在Heroku？

问如何使Vue.js应用程序与路由工作在Heroku？
EN

Stack Overflow用户

提问于 2017-05-01 21:42:08

回答 4查看 2.5K关注 0票数 4

我跟随这篇文章将应用程序部署到heroku。它在最低程度上起作用。

该应用程序使用vue-路由器。单个应用程序的常见之处是，如果我们不首先从主页引导框架，路由就无法工作。

由于我使用Express.js为这个没有后端的应用程序创建服务器，所以我创建了一个通配符路由，用于将index.html服务器发送到所有路由。因此，如果用户进入/某个路由，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没有引导vue.js框架的脚本(比如dist/app.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中。

所以现在我被困住了。

当我走到根路径时，为什么vue.js应用程序工作，即使index.html不包含构建的应用程序脚本？
如何在生产中处理路由，在这种情况下，Heroku，这样用户就不需要先去根路由来引导框架。他们可以走一条路线，一切都会正常的。

express

heroku

vue.js

vuejs2

vue-router

回答 4

Stack Overflow用户

发布于 2017-10-03 01:01:56

下面是一个应该适用于您的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')
})

票数 5

Stack Overflow用户

发布于 2017-05-02 00:12:35

现在我使用https://nuxtjs.org/处理服务器端呈现。我不需要担心路由问题。

票数 1

Stack Overflow用户

发布于 2022-08-18 16:13:47

希望这能帮到你。我使用这个脚本在Vue编写的Heroku中部署了我的博客

const express = require("express");
const serveStatic = require("serve-static");
const path = require("path");
const compression = require("compression"); // <-- import this library
const app = express();

// use compression
app.use(compression()); // <-- use the library

//here we are configuring dist to serve app files
app.use("/", serveStatic(path.join(__dirname, "/dist")));

// this * route is to serve project on different page routes except root `/`
app.get(/.*/, function(req, res) {
  res.sendFile(path.join(__dirname, "/dist/index.html"));
});

const port = process.env.PORT || 8080;
app.listen(port);
console.log(`app is listening on port: ${port}`);

我使用app.get(/.*/, function(req, res)而不是app.get('/*', function (req, res)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43726961

复制

相似问题

问如何使Vue.js应用程序与路由工作在Heroku？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使Vue.js应用程序与路由工作在Heroku？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使Vue.js应用程序与路由工作在Heroku？
EN