详解如何使用 vue-cli 开发多页应用

日期：2020-05-11 栏目：程序人生浏览：次

本文介绍了如何使用 vue-cli 开发多页应用，分享给大家，具体如下：

修改的webpack配置文件

全局配置

修改 webpack.base.conf.js

打开 ~\build\webpack.base.conf.js ，找到entry，添加多入口

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

运行、编译的时候每一个入口都会对应一个Chunk

run dev 开发环境

修改 webpack.dev.conf.js

打开 ~\build\webpack.dev.conf.js ，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置

chunks: ['app']中的app对应的是webpack.base.conf.js中entry设置的入口文件

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，不配置就会引入所有页面的资源
  })
]

run build 编译

修改 config/index.js

打开~\config\index.js，找到build下的index: path.resolve(__dirname, '../dist/index.html')，在其后添加多页

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

修改 webpack.prod.conf.js

打开~\build\webpack.prod.conf.js，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置

HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中对应的 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，不配置就会引入所有页面的资源
  }),
]

转载注明出处：http://www.heiqu.com/420.html

详解如何使用 vue-cli 开发多页应用

相关推荐