Я прошу прощения за запутанный заголовок, но я полностью сбит с толку этим, и я думаю, что это как-то связано с тем, как Express обслуживает статические файлы, но точно не может быть этого.
Я создаю простое приложение Vue, обслуживаемое Express статически.
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 будут загружены только в том случае, если я раскомментирую эту статически обслуживающую линию.
Это простая страница пользовательского интерфейса, ничего экстравагантного. В Chrome я получаю пустую страницу с заголовком «Hello World» на вкладке. Я также не могу открыть DevTools, и расширение Chrome, которое у меня есть, не распознает Vue как работающее на странице
В Mozilla тот же результат, что и в Chrome, но он может видеть DevTools, и это просто базовый HTML, и нет никаких признаков других файлов (даже если я обслуживаю файлы в public) при загрузке. Здесь также нет ошибок в логах.
В логах сервера нет ошибок. Раньше я получал ответ в журналах при попадании в корневую конечную точку, но по какой-то причине я больше не являюсь.
Я понимаю, что это не так уж и много, но если у кого-то есть какие-то начальные мысли, они будут очень благодарны:)
EDIT
Чтобы уточнить, когда я работаю с файлами из public dir, я могу нажать их в браузере, т.е. 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,
}),
],
};
При взгляде на DevTools в Firefox, <script> для включения client.min.js присутствует, но по-прежнему ничего не отображается.