ホームページ > 記事 > ウェブフロントエンド > 単一ページから複数ページを作成するための 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 cli 再構築マルチページスキャフォールディングサンプル共有
Vue-cli を複数ページをサポートする履歴モードに変換する方法
以上が単一ページから複数ページを作成するための Vue-cli メソッドのサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。