vue+cli の単一ページのスキャフォールディングを複数ページのスキャフォールディングに変換する方法

今回はvue+cliシングルページスキャフォールディングをマルチページスキャフォールディングに変換する方法とvue+cliシングルページスキャフォールディングをマルチページスキャフォールディングに変換する際に注意すべき注意点についてお届けします。以下は実際的なケースです。見てみましょう。

公式に提供されているプロジェクト生成ツール vue-cli は、複数ページの WebApp をサポートしていませんが、実際のプロジェクトでは、このようなスキャフォールディングが必要です。ここでは、単一ページのスキャフォールディングを変換するための解決策を示します。複数ページのスキャフォールディングへのリンクは参考用です。悪い点があれば修正してください。

準備

vue-cli を使用して、必要な単一ページのプロジェクト スキャフォールディングを生成してから、変更プロジェクトを開始します。

復興プロセス

ステップ 1 ディレクトリ構造を変更します

step1 srcディレクトリ配下にviewsフォルダーを新規作成し、viewsフォルダー配下にindexフォルダーを新規作成します

step2 srcディレクトリ内のmain.jsとApp.vueをstep1のindexフォルダーに移動し、main.jsの名前をindex.

に変更します step3 srcディレクトリ内のrouterフォルダーをstep1のindexフォルダーに移動します。routerを使用しない場合は、index.js内でコメントアウトできます。各ページはシングルページアプリケーションではないため、使用しませんでした。なので、ルーティング機能

を使用してください。 step4 ルートディレクトリにあるindex.htmlファイルをstep1のindexフォルダーに移動します

ステップ 2 ビルドの下の設定ファイルを変更します

運用環境では、固有の js ファイルはページにパッケージ化され、パブリックな js ファイルはすべて 1 つの塊にパッケージ化されません。パッケージ化後のファイル ディレクトリ構造も比較的明確です。すべての変更はビルドフォルダーにあります

step1 utils.jsを修正し、ページの複数のエントリを取得する関数と、パッケージ化されたページを入力する関数の2つを追加し、js:

var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(dirname, '../src/views')
var merge = require('webpack-merge')
//多入口配置
//获取views文件夹下，每个页面下的index.js作为页面入口，故每个页面下都必须有index.js
exports.entries = function() {
 var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')
 var map = {}, tmp = [], pathname = '';
 entryFiles.forEach((filePath) => {
 var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
 tmp = filePath.split('/').splice(-4)
 map[tmp[2] + '/' + filename] = filePath
 })
 return map
}
//多页面输出配置
//读取views文件夹下的对应每个页面的html后缀文件，然后放入数组中
//如果想要更深的定制或者修改，建议大家看一下CommonsChunkPlugin
//推荐一个基础的 https://segmentfault.com/q/1010000009070061
exports.htmlPlugin = function() {
 let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
 let arr = []
 entryHtml.forEach((filePath) => {
 let jsPath = '', tmp = [];
 let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
 tmp = filePath.split('/').splice(-4)
 jsPath = tmp[2] + '/' + 'index'
 let conf = {
  template: filePath,
  filename: filename + '.html',
  chunks: ['manifest', 'vendors', jsPath],
  inject: true
 }
 if (process.env.NODE_ENV === 'production') {
  conf = merge(conf, {
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
  })
 }
 arr.push(new HtmlWebpackPlugin(conf))
 })
 return arr
}
step2 修改webpack.base.conf.js文件配置的入口
// entry: {
// app: './src/main.js'
// },
entry: utils.entries(),
step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代码，将其注释掉：
new HtmlWebpackPlugin({
 filename: 'index.html',
 template: 'index.html',
 inject: true
}),

を注入します。 上記のメソッドを plugins 属性値の後に追加します。コード スニペットは次のとおりです。 上記のメソッドを plugins 属性値の後に追加します。コード スニペットは次のとおりです。 設定が完了しました。通常どおり

プロジェクトを開始

してください。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

オブジェクトの透明度をJSで操作する手順の詳細な説明

履歴モードでvueルートを更新するとレンダリングページが反映されない問題の対処方法

以上がvue+cli の単一ページのスキャフォールディングを複数ページのスキャフォールディングに変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。