Vue-cli method example code for creating single page to multiple pages-JS Tutorial-php.cn

For some projects, a single page cannot meet the needs well, so the single-page project created by vue-cli needs to be changed to a multi-page project. This article mainly introduces you to the method of creating a project from single page to multi-page with Vue-cli. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

You need to modify the following files:

1. Download the dependent glob

$npm install glob --save-dev

Copy after login

2. Modify the files under build

(1) Modify webpack.base.conf.js

Add the following code:

var glob = require(&#39;glob&#39;)；
var entries = getEntry(&#39;./src/pages/**/*.js&#39;)

Copy after login

Change # in module.exports ##

entry: {
   app: &#39;./src/main.js&#39;
  },

Copy after login

Comment it out and then add this line of code:

 entry: entries,

Copy after login

As for what entries are, don’t worry, look below:

Add a method:

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

Copy after login

Just modify this file to look like this.

(2) Modify webpack.dev.conf.js

Add the following code:

//引入
var glob = require(&#39;glob&#39;)
var path = require(&#39;path&#39;)

Copy after login

Change # in plugins in module.exports ##

new HtmlWebpackPlugin({
  filename: &#39;index.html&#39;,
  template: &#39;index.html&#39;,
  inject: true
}),

Copy after login

Comment it out, and then add the following code:

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(&#39;src/pages/**/*.html&#39;);

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

Copy after login

This is enough to modify this file.

(3) webpack.prod.conf.js

The routine of modifying this file is similar to the previous file

Add the following code: var glob = require( 'glob') Because when the project was created, yes was directly selected for all optional dependencies when generating the project, so the env declaration in the project is defined as follows:

Copy code

The code is as follows:

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

But since the webpack.test.conf.js file has not yet been modified, you need to replace this line of declaration with the following line:

var env = config.build.env

Copy after login

Replace ## in the plugins in webpackConfig #

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

Copy after login

Comment out and add the following code after the declaration definition 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(&#39;src/pages/**/*.html&#39;);

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

Copy after login

At this time, this file has also been modified.

3. Modify the file under config

In this folder, you only need to modify one file: index.js. The function of this file is to find the file path, and then According to the directory level set by this file, the packaged file and the corresponding hierarchical file structure are generated. Add the following code:

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

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(&#39;src/pages/**/*.html&#39;);
 
//入口 index: path.resolve(__dirname, &#39;../dist/index.html&#39;)
for (var pathname in pages) {
 build[pathname] = path.resolve(__dirname, &#39;../dist/&#39; + pathname + &#39;.html&#39;)
}

Copy after login

Then replace the value of build in module.exports with the variable build we just added and declared. If you want to modify the packaged directory hierarchy, you can modify it in the build; you can also add the variables we need to define in the build. For example, we need to copy fabfile.py and favicon.ico to the a directory in the dist directory, just You can define a property in build,

distA:path.resolve(__dirname, &#39;../dist/a),

Copy after login

Then because 'copy-webpack-plugin' has been introduced in webpack.prod.conf.js (var CopyWebpackPlugin = require('copy-webpack-plugin') ), we can add the following code under webpackConfig.plugins:

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

Copy after login

Add the pages folder under the src directory

The hierarchical structure of the directory is arranged similar to this form:

5. Packaging

After making the above modifications, although there is no problem running locally, there will still be problems and errors will appear after packaging. ：webpackJsonp is not definedThe solution is as follows: In the conf defined in the for (var pathname in pages) loop under the webpack.prod.conf.js file, add two lines of code:

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

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

Copy after login

Comprehensive The above is the transformation process of this project from a single page to a multi-page project. Regarding the modification of the webpack.test.conf.js file, additional additions will be made after subsequent modifications are successful.

Related recommendations:

vue builds multi-page application example code sharing

vue cli reconstruction multi-page scaffolding example sharing

How to transform Vue-cli into a history mode that supports multiple pages

The above is the detailed content of Vue-cli method example code for creating single page to multiple pages. For more information, please follow other related articles on the PHP Chinese website!