Vue + html-webpack-plugin 未加载 index.html 生成

Question

我尝试使用 HtmlWebPackPlugin 来生成我的 index.html 所以...

我启动了一个新项目vue init webpack-simple#1.0 vue-html-webpack
安装npm i -D html-webpack-plugin
将 index.html 重命名为 entry-template.html
配置webpack.config.js..

我加..

  plugins: [
      new HtmlWebpackPlugin({
        template: 'entry-template.html',
        environment: process.env.NODE_ENV
      })
    ],

但是 web 我启动应用程序 npm run dev，返回 404（我想是找不到 index.html）

我的entry-template.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GitSkills</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

完整 source here

结果 -> https://vue-html-webpack-ogqlguavxx.now.sh/

问题

如何在 Vue 1.0 中使用 HtmlWebpackPlugin？

Answer 1

HtmlWebpackPlugin 使用全局配置的加载器来处理未定义不同的模板。在您的情况下，这会导致 vue-html-loader 处理您的 entry-template.html。可能是这个原因，你的模板 html 没有被正确处理。请查看有关加载程序处理方式的 docs for the HtmlWebpackPlugin。

直接指定加载程序是否适用于您的情况？

plugins: [
  new HtmlWebpackPlugin({
    template: '!!html!entry-template.html',
    environment: process.env.NODE_ENV
  })
],

详细语法请参考docs about loaders order并覆盖

更新：

vue-html-loader 是原始 html-loader 的扩展，似乎不会引起这里的问题。从您的 webpack 输出中，我看到您正在使用 publicPath 属性来控制在提供您的内容时要使用的基本路径。这不是您的文件在磁盘上的路径，而是 url 中的路径，您的内容应该从那里提供。因此，当您访问 localhost:8080/dist 时，您的设置已经有效。省略 publicPath 属性使其从根路径提供服务。

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js'
  },
  ...

另外，当使用路由器时，你应该在你的模板中添加一个路由器出口，这样你的模板的内容（例如登录）可以包含在主模板中（我猜是 app ).

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <router-view></router-view>
  </div>
</template>

Answer 2

看了这里的答案，研究了两天左右，关于同一个问题，原来这个问题具体与webpack-development-server不向本地文件系统写入文件有关而是将其文件写入 MEMORY ONLY.

你应该能够在你运行时使用Html-Webpack-Plugin正确生成文件默认的 webpack 构建命令（NOT WDS/Webpack-Development-Server）带有：

webpack

请记住，您必须位于项目目录中。或者，对于那些使用 vue.js Webpack-simple 项目 (https://github.com/vuejs-templates/webpack-simple/tree/master/template) 的人，您可以使用 Vue.js 示例（位于 package.json 内）附带的 npm 脚本，方法如下：

npm run build

如果一切顺利，您会注意到文件被写入目录，正如您认为的那样，但在使用 Webpack-Development-Server 时却没有（同样这不起作用，因为 WDS 写入到内存而不是本地文件系统）。

你可以看到这个 Whosebug 问题也运行在使用基础 Vue.js Webpack 项目时成为问题： html-webpack-plugin not inject js file into index.html when using webpack-dev-server

我在阅读上述问题时偶然发现了这个答案，因为用户提到：

"If I run webpack or npm run build, the js file is injected successfully. Can html-webpack-plugin also inject js file into index.html when I'm in localhost?"

Vue + html-webpack-plugin 未加载 index.html 生成

Vue + html-webpack-plugin not load index.html generated

webpack

vue.js

html-webpack-plugin

vue-loader

问题