vue cli に基づいて複数ページのスキャフォールディングを再構築するプロセスの紹介

この記事では、vue cli に基づいて複数ページのスキャフォールディングを再構築するプロセスを段階的に紹介します。これは非常に優れており、必要な方は参考にしてください。

公式に提供されているプロジェクト生成ツール vue-cli を使用します。複数ページの WebApp はサポートされていませんが、実際のプロジェクトではそのようなスキャフォールディングが必要なので、多くの専門家の方法を参照してください。参考までに、私の単一ページのスキャフォールディングを複数ページのスキャフォールディングに変換するソリューションを示します。悪い点があれば修正してください。

準備

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

再構築プロセス

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

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

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

• step3 step1のindexファイルにsrcディレクトリ内のrouterフォルダーを移動しない場合ルーターを使用します。index.js でコメントアウトできます。各ページは単一ページのアプリケーションではないため、ルーティング関数を使用する必要はありません。

• step4 インデックスを変更します。ルート ディレクトリの .html ファイルをステップ 1 のインデックス フォルダーに移動します
  

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

実稼働環境では、固有の js ファイルはページにパッケージ化され、パブリック js はすべてが一括して抽出されることはありません。パッケージ化後のファイル ディレクトリ構造も比較的明確です。すべての変更はビルドフォルダーにあります

step1 utils.js を変更し、2 つの関数を追加します。1 つはページの複数のエントリを取得するために使用され、もう 1 つはパッケージ化されたページを入力して 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 属性値の後に追加します。以下はコード スニペットです:

// new HtmlWebpackPlugin({
 // filename: 'index.html',
 // template: 'index.html',
 // inject: true
 // }),
 new FriendlyErrorsPlugin()
 ].concat(utils.htmlPlugin())
step4 修改webpack.prod.conf.js 找到下面的代码，注释掉：
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 // more options:
 // https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),

上記のメソッドを plugins 属性値の後に追加します。以下はコード スニペットです:

new CopyWebpackPlugin([{
  from: path.resolve(__dirname, '../static'),
  to: config.build.assetsSubDirectory,
  ignore: ['.*']
 }])
 ].concat(utils.htmlPlugin())

設定が完了しました。通常どおりプロジェクトを開始してください。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

IE11 でプロジェクト ページが空白で開く Vue 2.0 の問題を解決する方法

Vuex@2.3.0 の状態サポート関数に関するステートメント

VUEJS 2.0 サブコンポーネントaccess/ 親コンポーネントを呼び出す

以上がvue cli に基づいて複数ページのスキャフォールディングを再構築するプロセスの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。