Question

我为这个令人困惑的标题道歉，但我对此感到非常困惑，我认为它与Express如何提供静态文件有关，但肯定不是那样。

我正在创建一个由Express静态提供的简单Vue应用程序。

server / app.js （切入点）

import express from "express";
import morgan from "morgan";
import path from "path";
import bodyParser from "body-parser";

const app = express();

// Sends static files from the public path directory
app.use(express.static(path.join(__dirname, "..", "public")));

// Use morgan to log request in dev mode
app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true,
}));

app.listen(process.env.PORT || 3000, () => {
    console.log(`Listening on port: ${process.env.PORT}`);
});

// Server index.html page when request to the root is made
app.get('/', (req, res, next) => {
    res.sendFile("index.html", {
        root: path.join(__dirname, "..", "public"),
    });
});

的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Hello World</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

公开/ main.js

import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

import App from "./App";

Vue.use(BootstrapVue);
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
    el: "#app",
    components: { App },
    template: "<App/>",
});

公开/ App.vue

<template>
    Hello World!
</template>

<script>
    export default {
        name: "App",
    };
</script>

<style>
    #app {}
</style>

App.vue 和 main.js 只有在我取消注释该静态服务行时才会加载。

这只是一个简单的UI页面，没什么奢侈的。在Chrome中，我会在标签上看到一个标题为“Hello World”的空白页面。我也无法打开DevTools，我的Chrome扩展程序无法识别Vue在页面上运行

在Mozilla中，与Chrome相同，但可以看到DevTools，它只是基本的HTML，并且没有其他文件的迹象（即使我在public中提供文件）被装载。这里的日志也没有错误。

服务器日志中没有错误。我曾经在点击根端点时在日志中得到响应，但由于某种原因，我不再是。

我意识到这不是很多，但如果有人有任何初步想法，他们将不胜感激：）

修改

为了澄清一下，当我从public目录提供文件时，我可以在浏览器中点击它们，即 http://localhost:3000/App.vue

编辑2

我添加了一个基本的webpack.config来捆绑我的Vue和JS文件，但我得到了同样的行为。

webpack.config.js

const path = require("path");
const nodeExternals = require("webpack-node-externals");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: `${__dirname}/public/main.js`,
    output: {
        path: path.join(__dirname, "dist", "client"),
        filename: "client.min.js",
    },
    target: "node",
    resolve: {
        extensions: [
            ".js",
            ".vue",
        ],
        modules: [
            "node_modules",
        ],
    },
    externals: [
        nodeExternals(),
    ],
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: "vue-loader",
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                    presets: [
                        "es2015",
                    ],
                },  
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true,
        }),
    ],
};

在Firefox中查看DevTools时，<script>包括client.min.js，但仍然没有显示。

Answer 1

您当前的项目结构需要像Webpack这样的捆绑器。正如评论中所提到的，这不是你可以简单地“稍后添加”。

首先，单文件.vue组件必须构建。浏览器不知道如何解释格式。此任务通常由 loader 完成（请参阅https://github.com/vuejs/vue-loader）。

其次，浏览器通常不支持模块导入（虽然这种情况正在改变），因此您需要将所有这些import语句转换为可在HTML页面中执行的脚本包。

我强烈建议您通过 vue-cli 工具启动项目。请参阅https://github.com/vuejs/vue-cli。

您可以将Vue包含在HTML页面中，即

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

但这将从根本上改变您的源代码的组织方式，您可能会发现无法使用某些第三方内容，除非它们也支持常规<script>标记使用。您需要使用Vue.component()（或类似）语法创建组件。

Vue组件未呈现＆amp; DevTools挂

1 个答案: