Beispielcode für die Vue-cli-Methode zum Erstellen einer einzelnen Seite bis hin zu mehreren Seiten

Bei einigen Projekten kann eine einzelne Seite die Anforderungen nicht gut erfüllen, daher muss das von vue-cli erstellte einseitige Projekt in ein mehrseitiges Projekt geändert werden. In diesem Artikel wird Ihnen hauptsächlich die Methode zum Erstellen eines Projekts von einer Seite zu einer Seite mit Vue-cli vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Sie müssen die folgenden Dateien ändern:

1. Abhängiges Glob herunterladen

$npm install glob --save-dev

2 Erstellen Sie die Datei

(1) Ändern Sie webpack.base.conf.js

und fügen Sie den folgenden Code hinzu:

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

Ändern Sie das Modul. Kommentieren Sie

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

in den Exporten aus und fügen Sie dann diese Codezeile hinzu:

 entry: entries,

Was Einträge sind, machen Sie sich keine Sorgen, schauen Sie unten nach:

Fügen Sie eine Methode hinzu:

//获取入口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;
}

Ändern Sie die Datei einfach wie folgt.

(2) Ändern Sie webpack.dev.conf.js

Fügen Sie den folgenden Code hinzu:

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

Fügen Sie den Plugins den folgenden Code hinzu in module.exports Kommentieren Sie

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

aus und fügen Sie dann den folgenden Code hinzu:

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));
}

Dies reicht aus, um diese Datei zu ändern.

(3) webpack.prod.conf.js

Die Routine zum Ändern dieser Datei ähnelt der der vorherigen Datei
Fügen Sie den folgenden Code hinzu: var glob = require( 'glob') Da beim Erstellen des Projekts beim Generieren des Projekts direkt Ja für alle optionalen Abhängigkeiten ausgewählt wurde, ist die Env-Deklaration im Projekt wie folgt definiert:

Code kopieren Der Code lautet wie folgt:

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

Aber da die Datei webpack.test.conf.js noch nicht geändert wurde, müssen Sie diese Deklarationszeile in die folgende Zeile ändern:

var env = config.build.env

Ändern Sie die Plugins in webpackConfig

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

Kommentieren Sie es aus und fügen Sie den folgenden Code nach der Deklarationsdefinition webpackConfig hinzu:

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));
}

Zu diesem Zeitpunkt wurde auch diese Datei geändert.

3. Ändern Sie die Datei unter config

In diesem Ordner müssen Sie nur eine Datei ändern: index.js. Die Funktion dieser Datei besteht darin, die zu finden Dateipfad und dann werden entsprechend der durch diese Datei festgelegten Verzeichnisebene die gepackte Datei und die entsprechende hierarchische Dateistruktur generiert. Fügen Sie den folgenden Code hinzu:

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')
}

Ersetzen Sie dann den Wert von build in module.exports durch die Variable build, die wir gerade hinzugefügt und deklariert haben. Wenn Sie die gepackte Verzeichnishierarchie ändern möchten, können Sie sie im Build ändern. Sie können auch die Variablen hinzufügen, die wir im Build definieren müssen. Wir müssen beispielsweise fabfile.py und favicon.ico in das Verzeichnis a kopieren im dist-Verzeichnis, nur Sie können eine Eigenschaft in build definieren,

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

und dann, weil 'copy-webpack-plugin' in webpack.prod.conf.js eingeführt wurde (var CopyWebpackPlugin = require( 'copy-webpack-plugin ')), können wir den folgenden Code unter webpackConfig.plugins hinzufügen:

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'
  }
 ])

Den Seitenordner im src-Verzeichnis hinzufügen

Die hierarchische Struktur des Verzeichnisses ist ähnlich wie folgt angeordnet:

5. Verpackung

Nachdem die oben genannten Änderungen vorgenommen wurden, gibt es lokal kein Problem Nach dem Packen wird es immer noch Probleme geben, es wird ein Fehler angezeigt: webpackJsonp ist nicht definiert
Die Lösung lautet wie folgt: In der conf-Schleife unter webpack.prod.conf definiert .js-Datei, fügen Sie zwei Codezeilen hinzu:

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

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

Zusammenfassend ist dies der Transformationsprozess dieses Projekts von einer einzelnen Seite in ein mehrseitiges Projekt. In Bezug auf die Änderung des webpack.test. In der Datei conf.js werden nach erfolgreichen Änderungen weitere Ergänzungen vorgenommen.

Verwandte Empfehlungen:

Vue Construction mehrseitiges Anwendungsbeispiel für Code-Sharing

Vue CLI-Rekonstruktion mehrseitiges Gerüstbeispiel Teilen

So verwandeln Sie Vue-cli in einen Verlaufsmodus, der mehrere Seiten unterstützt

Das obige ist der detaillierte Inhalt vonBeispielcode für die Vue-cli-Methode zum Erstellen einer einzelnen Seite bis hin zu mehreren Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!