小白使用vue-cli3的配置过程记录

首先，很简单的选择了router+babel的功能模板进行配置。只是简单地按照文档配置了一下。

看这篇文章就可以了

忽略下面内容

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? './'
    : '/',
  assetsDir: 'static',
  productionSourceMap: false,
  css: {
    modules: true
  }
}

下面都是一些废话。

不与vue cli2+进行比较。

先比较默认的功能模板（babel+eslint）和我选择的功能模板（babel+router）的区别：

	babel+eslint	babel+router
1.browserslist（位置不同，内容一样）	放在package.json中	放在文件.browserslistrc中
2.postcss（位置不同，内容一样）	放在package.json中	放在postcss.config.js中

src文件夹中的区别不管。

在项目的根目录新建一个vue.config.js文件（文档要求这个文件应该导出一个包含了选项的对象）：

module.exports = {
    // 选项
}

打开配置的官方文档，ok，万事俱备，开始配置。

1. baseUrl (output.publicPath)

module.exports = {`module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? './'           (部署环境)    使用相对路径的局限性：1.当使用基于 HTML5 history.pushState 的路由时（不懂），2.使用pages。所以还是写/my_project/吧
    : '/'           （开发环境）
}

2. outputDir (output.path)

打包后生成的目录名字，dist用惯了，所以采用默认（outputDir: 'dist'）不做配置

3. assetsDir

打包后放静态资源的文件夹，用惯了static，就设了一下：assetsDir: 'static',，静态资源不包括public里面的东西。

上面那句话不懂。

4. indexPath

打包后放index.html的地方，不明白意义何在，默认index.html，使用默认，不做配置。

5. filenameHashing

默认情况下（默认为true），生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。项目使用vue-cli3生成的index.html，所以不做更改。

6. pages（vue-cli2+在webpack.dev.conf.js中）

多页面应用模式下的配置，跳过。

7. lintOnSave

看文档吧，我选择的模板不需要，关于eslint的，所以不做配置。

8. runtimeCompiler

在main.js中有一个new Vue { }里面可以有一个属性：template，默认不可以使用，设置为true后就可以使用了，我不用，所以不设。具体可以去文档了解。

9. transpileDependencies

不理解，跳过。

10. productionSourceMap

不需要，所以设置成了false。这个可以去了解一下。

11. crossorigin 12. integrity

不理解，跳过。

13. configureWebpack 14. chainWebpack

感觉用这个要先会webpack，跳过。

15. css.modules

设为true。

16. css.extract 17. css.sourceMap

不更改。

18. css.loaderOptions

不懂。

19. devServer

跟2中设置代理的那个devserver看着差不多。

20. devServer.proxy

代理。解决跨域问题。

devServer: {
    proxy: 'http://localhost:4000'     （应该是指上线地址吧，没试过）
}

21. parallel 22. pwa 23. pluginOptions

24. Babel (可以通过 babel.config.js 进行配置)

25. ESLint (可以通过 .eslintrc 或 pacakge.json 中的 eslintConfig 字段来配置

)