Question

构建单页应用程序并使用node（v7.7.1）作为服务器和express来路由和构建API。

我的前端被打包到一个名为/client的文件夹中（所以你所有的JS，css，img和html都在那里）。我的API包含根网址/api。

任何其他非文件或API的查询都应发送到index.html。所以我尝试了以下内容：

app.use(express.static(path.join(__dirname, '../client')));
app.get('*', function (req, res, next) {
    if (req.originalUrl.indexOf('/api') !== -1) {
        return next()
    }
    if (/\/(\w|-)+\.\w{2,5}$/gmi.test(req.originalUrl)) {
            return res.sendFile(rss);
    }
    res.sendFile(path.join(__dirname, '../client/index.html')); 
});

上面给出了css和js文件控制台中mime类型错误的错误（也许是图片，但是因为没有加载所以无法告诉）。

浏览器控制台：

Refused to apply style from '/app-2432393bf1588983d4f6.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

有关如何更好地执行此操作或如何解决问题的任何提示非常感谢。

Answer 1

这样做

   function getRoutes(){
      const router = require('express').Router();
      router.get('/abc',function(req,res,next){
         //logic
      })
      router.post('/bcd',function(req,res,next){
        //logic
      })
      router.all('*',function(req,res,next){
         res.redirect('/');   
      })   //make sure this one is always at the last of all routes. 
      return router;
   }     
app.use('/',express.static(__dirname +'/client'))); // for static content
app.use('/api',getRoutes());

它可以通过更多方式处理。

让我知道它是否有帮助

Answer 2

我会做更多的事情：

app.use(express.static(path.normalize(__dirname, '../client'))); // This will serve index.html by default on the "/" route

app.get('/api/:func', (req, res, next) => { // Call this with "/api/save"
        console.log(`Called the API's ${req.params.func} function`);
        next()
    })
    .get("/file/:filename", (req,res) => res.sendFile(req.params.filename) ) // call "/file/style.css"

OP的评论后

编辑

1）将所有其他流量发送到index.html怎么样？我的前端处理任何未找到的页面和排序。

您可以进行重定向

app.get( "*", (req,res) => res.redirect("/") )

2）之前我曾经这样做过，但之后由于某种原因没有做到当我看到找到的文件的来源时，对我有意义 style.css这是我的html页面。

呃，不知道如何检查或调试......

Node Express使用单页面应用程序提供动态和静态文件

2 个答案: