0

HtmlWebPackPlugin を使用して index.html を生成しようとしているので...

  1. 新しいプロジェクトを開始しますvue init webpack-simple#1.0 vue-html-webpack
  2. インストールnpm i -D html-webpack-plugin
  3. index.htmlに名前を変更entry-template.html
  4. 構成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>

完全なソースはこちら

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

質問

Vue 1.0 でHtmlWebpackPluginを使用するにはどうすればよいですか?

4

2 に答える 2

1

別のHtmlWebpackPlugin方法で定義されていない場合、 はグローバルに設定されたローダーを使用してテンプレートを処理します。vue-html-loaderあなたの場合、これによりentry-template.html. おそらくこれが理由で、テンプレート html が正しく処理されていません。ローダーの処理方法については、ドキュメントをHtmlWebpackPlugin参照してください。

あなたの場合、ローダーを直接指定することはできますか?

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

構文の詳細については、ローダーの順序と上書きに関するドキュメントを参照してください。

アップデート：

これ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>
于 2016-09-04T19:47:44.317 に答える