vue專案多頁面入口配置

App.vue =>common/ index.vue  
Main.js => common/index.js複製程式碼

2、增加login.js,login.vue ，在全域性目錄下增加login.html

• 二、改配置
  

1、webpack.base.conf.js

entry: {
  index: './src/common/index.js',
  login: './src/common/login.js',
},複製程式碼

2. webpack.dev.conf.js

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true,
  chunks: ['index']
}),
new HtmlWebpackPlugin({
  filename: 'login.html',
  template: 'login.html',
  inject: true,
  chunks: ['login']
}),複製程式碼

3.webpack.prod.conf.js

plugins:[new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
    ? 'index.html'
    : 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','index']
}),
new HtmlWebpackPlugin({
  filename: config.build.login,
  template: 'login.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','login']
})],複製程式碼

及

由app改為index

4.構建配置更改、

Build下加入login

build: { 
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),
  login: path.resolve(__dirname, '../dist/login.html'),
}複製程式碼

完成了！！

• 三、結果
  

頁面效果圖，現在做成多頁面入口後，login頁面不再被渲染到content中，則可以實現如下效果。