Vue 组件未渲染 & DevTools 挂起

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"),
    });
});

索引.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 时，包含client.min.js的<script>存在，但仍然没有显示任何内容。

Answer 1

你当前的项目结构需要像 Webpack 这样的打包工具。 正如评论中提到的，这不是您可以简单地“稍后添加”的东西。

首先，必须构建单文件.vue组件。 浏览器不知道如何解释格式。 此任务通常由加载器完成（参见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>

但这将从根本上改变您的源代码的组织方式，并且您可能会发现无法使用某些 3rd 方包含，除非它们也支持一般的<script>标记使用。 您需要使用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