【发布时间】：2018-05-03 23:24:50
【问题描述】：
对于令人困惑的标题，我深表歉意，但我对此完全感到困惑，我认为这与 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>
public/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
<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> 存在，但仍然没有显示任何内容。
【问题讨论】：
-
假设您使用的是像 Webpack 这样的打包工具，您是否构建了 Vue 应用程序？ Express 是否为内置的
index.html提供服务？ -
把App.vue的模板改成
<template> <div>Hello World!</div> </template>再试试 -
@Sphinx 我已经做到了，没有改变
-
我觉得你不太明白。您不能只在 HTML 文件中粘贴
<script>标记。您需要一些东西来将您的.vue文件编译/转换为 JavaScript。然后你需要一些东西来捆绑所有import-ed 模块，因为浏览器并不真正支持模块加载（还）。您不能稍后“添加捆绑器”；它是构建和构建应用的方式的基本组成部分 -
正如其他人所提到的，您将需要一个构建过程，如果您现在不想处理这个问题，只需尝试 vue 而不处理构建工具（不要不要怪你，哈哈）有类似代码框codesandbox.io/s/vue 的东西，它可以让你玩转差异框架并为你做建筑信息。您甚至可以使用为您设置的 webpack 配置导出项目。
标签： javascript express vue.js