Vue多页面应用开发

• 打开\config\index.js文件,找到build，添加如下配置

     brand: path.resolve(__dirname, '../dist/brand.html')
  

• 打开/build/webpack.prod.conf.js文件，找到plugins，添加如下配置

    new HtmlWebpackPlugin({
        filename: config.build.brand,   //引用\config\index.js里的build
        template: 'brand.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency',
        chunks: ['manifest', 'vendor', 'brand']
    }),
  

编写入口文件

 import Vue from 'vue'
 import Brand from './brand.vue'
 import '../../assets/stylus/reset.css'

 Vue.config.productionTip = false

 /* eslint-disable no-new */
 new Vue({
 el: '#brand',
 template: '<Brand/>',
 components: { Brand }
 })

编写主组件

 <template>
 <div class="brands">
     brand
 </div>
 </template>
 <script>
 export default {

 }
 </script>
 <style lang="less" scoped>

 </style>