Question

所以，我有点问题。这是我的server.js

require('dotenv').load();
const http = require('http');
const path = require('path');
const express = require('express');

const app = express();



const server = http.createServer(app).listen(8080, () => {
    console.log('Foliage started on port 8080');
});

app.use(express.static(path.join(__dirname, '/public')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

这是做什么的，每个/whatever它都会提供index.html文件。除此之外，它还提供来自/public的静态文件。现在，我的index.html如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Foliage</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/foliage.css" media="screen" title="no title">
        <script src="https://use.fontawesome.com/763cbc8ede.js"></script>
    </head>
    <body>
        <div id="app">
            <router-view :key="$router.currentRoute.path"></router-view>
        </div>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="js/md5.js"></script>
        <script src="js/cookies.js"></script>
        <script src="js/dragula.js"></script>
        <script src="js/build.js"></script>

    </body>
</html>

为此，public/js和public/css正确加载了所有JS文件和样式文件。但是，在build.js这是一个webpack-ed vuejs应用程序中，我使用vue-resource从public/themes/Bareren/templates加载另一个文件。看起来像这样

page = {};
page.Template = "Index";   
this.$http.get('themes/Barren/templates/'+page.Template+'.html').then((response) => {
      console.log(response.body);
});

但是，此请求未向我提供public/themes/Barren/templates中的文件。它改为返回网站自己的index.html文件。我怎么能解决这个问题？

Answer 1

app.use（express.static（path.join（__ dirname，'/ public'）））;

app.get（'/'，（req，res）=＆gt; {       res.sendFile（path.join（__ dirname，'index.html'））; }）;

app.get（'*'，（req，res）=＆gt; {       res.sendFile（path.join（__ dirname，'index.html'））; }）;

尝试使用console.log（path.join（__ dirname，'/ public'））和console.log（path.join（__ dirname，'index.html'）来查看路径是否符合您的预期。< / p>

此。$ http.get（ '主题/巴伦/模板/' + page.Template + 'HTML'）。然后加入（（响应） =＆GT; { 的console.log（response.body）; }）;

您还可以尝试控制台记录您的获取请求。通常我需要使用路径来确保我正在提供正确的文件。

Answer 2

您可以尝试的一件事是定义GET路线，该路线在底部的通配符之前使用您的模板进行响应。

app.get('/themes', (req, res) => { // get the theme name res.sendFile(path.join(__dirname, ... )); }); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'index.html')); });

Vue-resource无法加载表达静态文件

2 个答案: