Vue多页面应用开发

·  阅读 2820
原文链接: aaronxue.top
  1. 配置编译环境,也就是run build
    • 打开\config\index.js文件,找到build,添加如下配置
         brand: path.resolve(__dirname, '../dist/brand.html')
      复制代码
  2. 配置生产环境
    • 打开/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']
        }),
      复制代码
  3. 编写入口文件

     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 }
     })
    复制代码
  4. 编写主组件

     <template>
     <div class="brands">
         brand
     </div>
     </template>
     <script>
     export default {
    
     }
     </script>
     <style lang="less" scoped>
    
     </style>
    复制代码
  5. 运行,打开http://localhost:8080/brand.html看到效果