Vue-resource无法加载Express静态文件。

Question

Vue-resource无法加载Express静态文件。

javascriptnode.jsexpressvuejs2vue-resource

4

我有一个小问题。这是我的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>

所有JS文件和样式文件都已从 public/js 和 public/css 中正确加载。但是在 webpack 打包的 vuejs 应用程序中的 build.js 中，我使用 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文件。我该如何解决这个问题？

- Rando Hinn

2个回答

1

你可以尝试定义一个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'));
});

- cienki

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wilson Ng · Accepted Answer

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')); });

请尝试使用console.log(path.join(__dirname, '/public'))和console.log(path.join(__dirname, 'index.html'))，以查看路径是否符合您的期望。

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

您还可以尝试使用console.log来打印get请求。通常我需要处理路径，以确保我正在提供正确的文件。