Express 如何使Vue.js应用程序在Heroku中使用路由？_Express_Heroku_Vue.js_Vuejs2_Vue Router

Express 如何使Vue.js应用程序在Heroku中使用路由？

express heroku vue.js vuejs2

Express 如何使Vue.js应用程序在Heroku中使用路由？,express,heroku,vue.js,vuejs2,vue-router,Express,Heroku,Vue.js,Vuejs2,Vue Router,我随后将应用程序部署到heroku。它在最低水平上工作该应用程序利用vue路由器。单一应用程序的一个常见问题是，如果我们不先到主页引导框架，路由就不起作用由于我使用Express.js为应用程序创建了一个没有后端的服务器，所以我创建了一个通配符路由，将index.html发送到所有路由。因此，如果用户输入了/someroute，express.js将index.html作为服务器，该服务器将引导框架，那么它应该解决如何为该路由提供组件 server.js app.get('/*', func

我随后将应用程序部署到heroku。它在最低水平上工作

该应用程序利用vue路由器。单一应用程序的一个常见问题是，如果我们不先到主页引导框架，路由就不起作用

由于我使用Express.js为应用程序创建了一个没有后端的服务器，所以我创建了一个通配符路由，将index.html发送到所有路由。因此，如果用户输入了/someroute，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>

所以我不能只将

static/js/app.js

添加到index.html

所以现在我被卡住了

为什么即使

index.html

不包含内置的应用程序脚本，vue.js应用程序在我执行根路径时仍能工作

如何在生产中处理路由，在这个caes中，Heroku，这样用户就不需要先到根路由来引导框架。他们可以走一条路，一切都会好起来的

我现在使用它来处理服务器端渲染。我不需要担心路由问题

这里有一个应该适合您的

server.js

文件：

var express=require（'express'））
var history=require（'connect-history-api-fallback'）
var path=require（'路径'）
var serveStatic=require（'serve-static'）
var app=express（）
//对非根路由使用回退（Vue路由器需要）
//注意：在静态服务中间件之前必须“使用”历史回退！
应用程序使用（历史记录）({
//可选：包括更详细的日志记录
详细：正确
}))
//从构建文件（图像等）提供静态资源
app.use（serveStatic（path.join（uu dirname，/dist'））
var port=process.env.port | 5000
应用程序侦听（端口，（）=>{
console.log（'服务器在启动http://localhost:5000')
})

服务器需要将所有路由请求重定向到

index.html

，以便SPA可以处理路由。但您需要让非路由请求（如静态资产和api调用）通过服务器。基于

server.js

文件，您似乎已经知道了这一点，所以我不知道您对路由有什么不了解。请注意，

connect history api fallback

必须在

service static

中间件之前！谢谢@Kendall，这是我的问题，因为我已经将静态作为第一选择。

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.