小白使用vue-cli3的配置過程記錄
阿新 • • 發佈：2018-12-15
首先，很簡單的選擇了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
多頁面應用模式下的配置，跳過。
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 欄位來配置
)