Vue 组件未渲染 & DevTools 挂起

Question

I apologise by the confusing title but I am completely baffled by this and I think it has something to do with how Express serves static files but cannot be of that for sure.我对令人困惑的标题表示歉意，但我对此完全感到困惑，我认为这与 Express 如何提供静态文件有关，但不能肯定。

I am creating a simple Vue app served by Express statically.我正在创建一个由 Express 静态提供的简单 Vue 应用程序。

server/app.js (entry point) 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索引.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>

public/main.js公共/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/>",
});

public/App.vue公共/App.vue

<template>
    Hello World!
</template>

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

<style>
    #app {}
</style>

App.vue and main.js will only be loaded in if I uncomment that statically serving line.仅当我取消注释该静态服务行时，才会加载App.vue和main.js。

This is just a simple UI page, nothing extravagant.这只是一个简单的 UI 页面，没有什么奢侈的。 In Chrome, I get a blank page with just the title "Hello World" on the tab.在 Chrome 中，我得到一个空白页面，标签上只有标题“Hello World”。 I am not able to open DevTools either and the Chrome extension I have does not recognise Vue as running on the page我也无法打开 DevTools，并且我拥有的 Chrome 扩展程序无法识别 Vue 在页面上运行

In Mozilla, same result as Chrome but can see DevTools and it is just the basic HTML and there is no sign of other files (even if I serve the files in public ) being loaded.在 Mozilla 中，结果与 Chrome 相同，但可以看到 DevTools，它只是基本的 HTML，没有迹象表明其他文件（即使我public提供文件）正在加载。 There are also no errors in the logs here.这里的日志也没有错误。

There are no errors in the server logs.服务器日志中没有错误。 I used to get a response in the logs when hitting the root endpoint but, for some reason, I no longer am.在访问根端点时，我曾经在日志中得到响应，但由于某种原因，我不再是。

I realise this is not a lot to go off but if anyone has any initial thoughts they would be much appreciated :)我意识到这不是很多事情，但如果有人有任何初步想法，他们将不胜感激:)

EDIT编辑

To clarify, when I serve files from public dir, I can hit them in the browser ie http://localhost:3000/App.vue澄清一下，当我从public目录提供文件时，我可以在浏览器中点击它们，即http://localhost:3000/App.vue

EDIT 2编辑 2

I have added a basic webpack.config to bundle my Vue and JS files but I am getting the same behaviour.我添加了一个基本的webpack.config来捆绑我的 Vue 和 JS 文件，但我得到了相同的行为。

webpack.config.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,
        }),
    ],
};

When looking at the DevTools in Firefox, the <script> to include client.min.js is present but there is still nothing displayed.在 Firefox 中查看 DevTools 时，包含client.min.js的<script>存在，但仍然没有显示任何内容。

Answer 1

Your current project structure needs a bundler like Webpack.你当前的项目结构需要像 Webpack 这样的打包工具。 As mentioned in the comments, this is not something you can simply "add later" .正如评论中提到的，这不是您可以简单地“稍后添加”的东西。

First, single-file .vue components must be built .首先，必须构建单文件.vue组件。 Browser's don't know how to interpret the format.浏览器不知道如何解释格式。 This task is usually done by a loader (see https://github.com/vuejs/vue-loader ).此任务通常由加载器完成（参见https://github.com/vuejs/vue-loader ）。

Second, browsers don't generally support module imports (this is changing though) so you need something to turn all those import statements into a bundle of scripts that can execute in your HTML page.其次，浏览器通常不支持模块导入（尽管这种情况正在发生变化），因此您需要将所有这些import语句转换为可以在 HTML 页面中执行的脚本包。

I highly recommend starting your project via the vue-cli tools.我强烈建议您通过vue-cli工具启动您的项目。 See https://github.com/vuejs/vue-cli .请参阅https://github.com/vuejs/vue-cli 。

You can work with Vue by including it in your HTML page, ie您可以通过将 Vue 包含在 HTML 页面中来使用它，即

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

but this will fundamentally change how your source code is organised and you may find it impossible to make use of some 3rd party inclusions unless they too support general <script> tag use.但这将从根本上改变您的源代码的组织方式，并且您可能会发现无法使用某些 3rd 方包含，除非它们也支持一般的<script>标记使用。 You'll need to create components using the Vue.component() (or similar) syntax.您需要使用Vue.component() （或类似的）语法创建组件。

Vue 组件未渲染 & DevTools 挂起

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-05-04 01:25:08

Vue 组件未渲染 &amp; DevTools 挂起

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-05-04 01:25:08

Vue 组件未渲染 & DevTools 挂起

解决方案1
1 已采纳 2018-05-04 01:25:08