単一ページから複数ページを作成するための Vue-cli メソッドのサンプルコード

プロジェクトによっては、単一ページではニーズを十分に満たせないため、vue-cli で作成した単一ページのプロジェクトを複数ページのプロジェクトに変更する必要があります。この記事では主に、Vue-cli でプロジェクトを単一ページから複数ページに作成する方法を紹介します。編集者が非常に優れていると感じたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

以下のファイルを変更する必要があります:

1. 依存する glob

$npm install glob --save-dev

をダウンロードします。2. build の下のファイルを変更します

(1) webpack.base.conf.js を変更します

次のコード:

var glob = require('glob')；
var entries = getEntry('./src/pages/**/*.js')

module.exports の

entry: {
   app: './src/main.js'
  },

をコメントアウトして、次のコード行を追加します:

 entry: entries,

エントリが何であるかについては、心配しないで、以下を見てください:

メソッドを追加します:

//获取入口js文件
function getEntry(globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  pathname = basename.split("_")[0]; //index_main.js得到index
  entries[pathname] = entry;
 });
 return entries;
}

このファイルを次のように変更します。

(2) webpack.dev.conf.js を変更します

次のコードを追加します:

//引入
var glob = require('glob')
var path = require('path')

module.exports のプラグイン内の

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),

をコメントアウトし、次のコードを追加します:

function getEntry(globPath) {
 
 var entries = {},basename;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');

for (var pathname in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname],  // 模板路径
  inject: true,       // js插入位置
  chunks:[pathname]
 };
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

変更このファイルはそれだけです。

(3) webpack.prod.conf.js

このファイルを変更するルーチンは前のファイルと似ています
次のコードを追加します: var glob = require('glob') プロジェクトが作成されるとき、プロジェクトが生成されるとき、すべてのオプションの依存関係に対して Yes が直接選択されるため、プロジェクト内の env 宣言は次のように定義されます:

コードをコピーします コードは次のとおりです:

var env = process.env.NODE_ENV === 'testing ? require ('../config/test.env') : config.build.env ;

ただし、webpack.test.conf.js ファイルはまだ変更されていないため、変更する必要がありますこの宣言行を次の行に追加します。

var env = config.build.env

webpackConfig のプラグインの

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
}),

をコメント アウトし、宣言の後に次のコードを追加して webpackConfig を定義します。

function getEntry(globPath) {
 var entries = {},
  basename;
 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');

for (var pathname in pages) {
 var conf = {
   filename: process.env.NODE_ENV === 'testing'
    ? pathname + '.html'
    : config.build[pathname],
   template: pages[pathname],
   inject: true,
   minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
   },
   chunks:[pathname]
  }
 webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

この時点で、このファイルも変更されています。

3. config の下のファイルを変更します

このフォルダーでは、index.js という 1 つのファイルを変更するだけで済みます。このファイルの機能は、ファイル パスを検索し、それに基づいてパッケージ化されたファイルを生成することです。このファイルによって設定されるディレクトリ レベルと、対応する階層ファイル構造。 次のコードを追加します:

var build = {
 env: require('./prod.env'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,
 productionGzip: false,
 productionGzipExtensions: ['js', 'css']
}

function getEntry(globPath) {
 var entries = {},basename;

 glob.sync(globPath).forEach(function(entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');
 
//入口 index: path.resolve(__dirname, '../dist/index.html')
for (var pathname in pages) {
 build[pathname] = path.resolve(__dirname, '../dist/' + pathname + '.html')
}

次に、module.exports の build の値を、先ほど追加して宣言した変数 build に置き換えます。 パッケージ化されたディレクトリ階層を変更したい場合は、ビルド内で変更できます。たとえば、fabfile.py と favicon.ico をディレクトリにコピーする必要があります。 dist ディレクトリで、ビルド時にプロパティを定義できます

distA:path.resolve(__dirname, '../dist/a),

そして、「copy-webpack-plugin」が webpack.prod.conf.js に導入されているため (var CopyWebpackPlugin = require('copy-webpack-plugin' ))、次のコードを webpackConfig.plugins の下に追加できます:

new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../fabfile.py'),
   to: config.build.distA,
   template: 'fabfile.py'
  }
 ])
new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../favicon.ico'),
   to: config.build.distA,
   template: 'favicon.ico'
  }
 ])

src ディレクトリにページ フォルダーを追加します

ディレクトリの階層構造は次の形式のように配置されます:

5.パッケージング

上記の変更を完了した後、ローカルでの実行には問題はありませんが、パッケージ化後には依然として問題が発生し、エラーが表示されます: webpackJsonp が定義されていません
解決策は次のとおりです: for (var pathname inページ) webpack.prod.conf.js ファイルの下のループ 定義された conf に、次の 2 行のコードを追加します:

chunksSortMode: 'dependency', // dependency 页面中引入的js按照依赖关系排序；manual 页面中引入的js按照下面的chunks的数组中的顺序排序；

chunks: ['manifest', 'vender', pathname] // 生成的页面中引入的js，'manifest', 'vender'这两个js是webpack在打包过程中抽取出的一些公共方法依赖，其中，'manifest'又是从'vender'中抽取得到的，所以这三个js文件的依赖关系是 pathname依赖 'vender'，'vender'依赖'manifest'.

要約すると、これはこのプロジェクトを単一ページから複数ページのプロジェクトに変換するプロセスです。 webpack.test.conf.js ファイルの変更については、その後の変更が成功した後、補足追加を続けます。

関連する推奨事項:

vue 構築マルチページアプリケーションサンプルコード共有

vue cli 再構築マルチページスキャフォールディングサンプル共有

Vue-cli を複数ページをサポートする履歴モードに変換する方法

以上が単一ページから複数ページを作成するための Vue-cli メソッドのサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。