前端目录结构

废话不多说先上目录

.
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   ├── webpack.prod.conf.js
│   └── webpack.test.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── dist
├── package-lock.json
├── package.json
├── src
│   ├── components
│   │   ├── HelloWorld.vue
│   │   └── ui
│   ├── modules
│   │   ├── util
│   │   │   ├── adAxios.js
│   │   │   ├── api.js
│   │   │   └── axios.js
│   │   └── vuex
│   │       ├── actions.js
│   │       ├── mutations.js
│   │       ├── store.js
│   │       └── type.js
│   └── pages
│       ├── admin
│       │   ├── admin
│       │   ├── admin.html
│       │   ├── admin.js
│       │   ├── app.vue
│       │   ├── componets
│       │   │   ├── admin.vue
│       │   │   ├── articleManage.vue
│       │   │   ├── loginPage.vue
│       │   │   ├── plug
│       │   │   │   ├── form.vue
│       │   │   │   ├── login.vue
│       │   │   │   └── nav.vue
│       │   │   └── write.vue
│       │   └── router
│       │       └── index.js
│       └── index
│           ├── App.vue
│           ├── assets
│           │   ├── css
│           │   │   └── markdown.css
│           │   ├── img
│           │   │   └── ...
│           │   └── svg
│           │       └── ...
│           ├── components
│           │   ├── articlePage.vue
│           │   ├── home.vue
│           │   ├── index.vue
│           │   ├── pageList.vue
│           │   └── plug
│           │       ├── Loading.vue
│           │       ├── Tag.vue
│           │       ├── abstract.vue
│           │       ├── articleToggle.vue
│           │       ├── coverImage.vue
│           │       ├── footer.vue
│           │       ├── form.vue
│           │       ├── login.vue
│           │       ├── nav.vue
│           │       └── svgMenu.vue
│           ├── index.html
│           ├── index.js
│           └── router
│               └── index.js
└── static
    └── style
        └── clear.css

初建项目的时候心想只是一个小项目而已吧，不需要多页面，结果！啪啪打脸，加载的东西实在太多，白屏时间太长，果断学习并且修改vue-cli改多页面入口~（总之不久我当然会去做ssr渲染，性能也会得到一定提升吧，其实关键还是想让搜索引擎能够检索到，嘻嘻）

那今天就来总结一下那几天对vue-cli的webpack配置做了哪些改动吧！

全局配置

找到/build/webpack.base.conf.js，添加入口

entry: {
  index: './src/pages/index/index.js',
  admin: './src/pages/admin/admin.js'
},

开发环境

找到/build/webpack.dev.conf.js，然后在plugins里面添加你所增加的页面

切记一定要添加chunks，不然单个页面会对两个页面内容全部打包，对应的值为entry入口文件中所对应的内容

  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    //对应展示页面
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/pages/index/index.html',
      inject: true,
      chunks:['index']
    }),
    //对应管理页
    new HtmlWebpackPlugin({
      filename: 'admin.html',
      template: './src/pages/admin/admin.html',
      inject: true,
      chunks:['admin']
    }),
  ]

还有就是，在开发环境下，访问除了主页面外的其他页，需要输入其文件名，vue并且只能使用hash模式，我就觉得这样很难看。找了好多别人的参考，几乎都是webpack1时候的配置方式，然后去查webpack文档找到了方法：

    historyApiFallback: {
      rewrites:[
        {from:/^\/$/,to:'admin.html'},
        {from:/\/admin/,to:'/admin.html'},
        {from:/^\/admin\/.*$/,to:'/admin.html'}
      ],
      disableDotRule: true
    },

这么一修改之后，确实舒服了不少~

生产环境

先找到/config/index.js配置出口，也就是编译压缩后生成的html的路径

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    admin: path.resolve(__dirname,'../dist/admin.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

然后找到/build/webpack.prod.conf.js，然后和前面开发环境一样添加出口规则（必须有chunks）

  new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'src/pages/index/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.admin,
      template: 'src/pages/admin/admin.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','admin']
    }),

chunks:其中vendor是提取公共模块插件的，manifest是处理模块管理的核心（这个必须要第一个加载）

然后，执行

npm run dev

享用吧！！
这样开发环境除了主页面不能用histroy模式，就差这点不完美了，有知道的兄弟希望给我答疑解惑！非常感谢！