Home > Web Front-end > JS Tutorial > How to use vue-cli to implement multi-page applications

How to use vue-cli to implement multi-page applications

亚连
Release: 2018-06-20 15:04:54
Original
1692 people have browsed it

This article mainly introduces in detail how to use vue-cli to develop multi-page applications. 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 and take a look.

This article introduces how to use vue-cli to develop multi-page applications and share it with everyone. The details are as follows:

Modified webpack configuration file

Global configuration

Modify webpack.base.conf.js

Open ~\build\webpack.base.conf.js and 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 aChunk

run dev development environment

Modify webpack.dev.conf.js

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

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

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 and find the index under build: path.resolve(__dirname, '../dist/index.html') , 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, under plugins Find new HtmlWebpackPlugin, add corresponding multiple pages after it, and add Chunk configuration for each page.

The filename in HtmlWebpackPlugin refers to the corresponding build

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

in config/index.js 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

You can also use the same entry entry

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement label scrolling switching in JS

How to use the EasyUI window in jQuery

How to use laydate.js date plug-in in Angular4.0

Issues about unsafe image paths when using Angular4

How to build Electron applications in Webpack

The above is the detailed content of How to use vue-cli to implement multi-page applications. 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