Home > Web Front-end > JS Tutorial > How to use vue-cli to develop multi-page application methods

How to use vue-cli to develop multi-page application methods

小云云
Release: 2018-05-12 14:00:14
Original
3480 people have browsed it

How to use vue-cli to develop multi-page applications? This article mainly introduces in detail how to use vue-cli to develop multi-page applications. The editor thinks it is quite good. Now I will share it with you and give you a reference. I hope it can help everyone.

Global configuration

Modify webpack.base.conf.js

Open~\build \webpack.base.conf.js, find the entry, add multiple entries

entry: {
  app: './src/main.js',
  app2: './src/main2.js',
  app3: './src/main3.js',
},
Copy after login

When running and compiling, each entry will correspond to a Chunk

run dev development environment

Modify webpack.dev.conf.js

Open ~\build\webpack.dev.conf.js and find new under plugins HtmlWebpackPlugin, add corresponding multiple pages behind it, and add Chunk configuration for each page

chunks: The app in ['app'] corresponds to the entry set in webpack.base.conf.js File

plugins:[
  // https://github.com/ampedandwired/html-webpack-plugin
  // 多页:index.html → app.js
  new HtmlWebpackPlugin({
   filename: 'index.html',//生成的html
   template: 'index.html',//来源html
   inject: true,//是否开启注入
   chunks: ['app']//需要引入的Chunk,不配置就会引入所有页面的资源
  }),
  // 多页:index2.html → app2.js
  new HtmlWebpackPlugin({
   filename: 'index2.html',//生成的html
   template: 'index2.html',//来源html
   inject: true,//是否开启注入
   chunks: ['app2']//需要引入的Chunk,不配置就会引入所有页面的资源
  }),
  // 多页:index3.html → app3.js
  new HtmlWebpackPlugin({
   filename: 'index3.html',//生成的html
   template: 'index3.html',//来源html
   inject: true,//是否开启注入
   chunks: ['app3']//需要引入的Chunk,不配置就会引入所有页面的资源
  })
]
Copy after login

run build compile

Modify config/index.js

Open~\config\index.js, Find the index under build: path.resolve(__dirname, '../dist/index.html'), and add multiple pages after it

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  index2: path.resolve(__dirname, '../dist/index2.html'),
  index3: path.resolve(__dirname, '../dist/index3.html'),
},
Copy after login

Modify webpack.prod.conf.js

Open ~\build\webpack.prod.conf.js, find new HtmlWebpackPlugin under plugins, add corresponding multiple pages behind it, and add Chunk configuration for each page

The filename in HtmlWebpackPlugin refers to the corresponding build in config/index.js

plugins: [
  // 多页:index.html → app.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',
    chunks: ['manifest','vendor','app']//需要引入的Chunk,不配置就会引入所有页面的资源
  }),
  // 多页:index2.html → app2.js
  new HtmlWebpackPlugin({
    filename: config.build.index2,
    template: 'index2.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    chunks: ['manifest','vendor','app2']//需要引入的Chunk,不配置就会引入所有页面的资源
  }),
  // 多页:index3.html → app3.js
  new HtmlWebpackPlugin({
    filename: config.build.index3,
    template: 'index3.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    chunks: ['manifest','vendor','app3']//需要引入的Chunk,不配置就会引入所有页面的资源
  }),
]
Copy after login

If there are many pages, you can consider using a loop to add HtmlWebpackPlugin to plugins

// utils.js
exports.getEntry = function(globPath, pathDir) {
  var files = glob.sync(globPath);
  var entries = {},
    entry, dirname, basename, pathname, extname;

  for (var i = 0; i < files.length; i++) {
    entry = files[i];
    dirname = path.dirname(entry);
    extname = path.extname(entry);
    basename = path.basename(entry, extname);
    pathname = path.join(dirname, basename);
    pathname = pathDir ? pathname.replace(new RegExp(&#39;^&#39; + pathDir), &#39;&#39;) : pathname;
    entries[pathname] = [&#39;./&#39; + entry];
  }
  return entries;
}
Copy after login
// webpack.base.conf.js
var pages = Object.keys(utils.getEntry(&#39;../src/views/**/*.html&#39;, &#39;../src/views/&#39;));
pages.forEach(function (pathname) {
  // https://github.com/ampedandwired/html-webpack-plugin
  var conf = {
    filename: &#39;../views/&#39; + pathname + &#39;.html&#39;, //生成的html存放路径,相对于path
    template: &#39;../src/views/&#39; + pathname + &#39;.html&#39;, //html模板路径
    inject: false,  //js插入的位置,true/&#39;head&#39;/&#39;body&#39;/false
    /*
     * 压缩这块,调用了html-minify,会导致压缩时候的很多html语法检查问题,
     * 如在html标签属性上使用{{...}}表达式,所以很多情况下并不需要在此配置压缩项,
     * 另外,UglifyJsPlugin会在压缩代码的时候连同html一起压缩。
     * 为避免压缩html,需要在html-loader上配置&#39;html?-minimize&#39;,见loaders中html-loader的配置。
     */
    // minify: { //压缩HTML文件
    //   removeComments: true, //移除HTML中的注释
    //   collapseWhitespace: false //删除空白符与换行符
    // }
  };
  if (pathname in config.entry) {
    conf.favicon = &#39;src/images/favicon.ico&#39;;
    conf.inject = &#39;body&#39;;
    conf.chunks = [&#39;vendors&#39;, pathname];
    conf.hash = true;
  }
  config.plugins.push(new HtmlWebpackPlugin(conf));
});
Copy after login

Same entry entry You can also use

// webpack.base.conf.js
entry: {
  app: utils.getEntry(&#39;../src/scripts/**/*.js&#39;, &#39;../src/scripts/&#39;)
},
Copy after login

Related recommendations:

vue-cli to quickly build vue applications and implement webpack packaging details

vue -The difference between custom path alias assets and static folders in cli

Summary of relevant examples about Vue-cli

The above is the detailed content of How to use vue-cli to develop multi-page application methods. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template