Vue的 vue.config.js 配置
1. 為什么要配置 vue.config.js
由於 vue-cli 3 也學習了 rollup 的零配置思路，所以項目初始化后，沒有了以前熟悉的 build 目錄，也就沒有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。
但是有些內容需要進行相關的配置，所以我們還是要創建一個vue.config.js來進行數據修改，比如代理啥的
2.里面的配置詳解
vue.config.js 文件是一個可選的配置文件，存放在根目錄中，要是有這個文件，在@vue/cli-service 啟動的時候會自動加載，所以我們在修改里面的內容之后，要進行項目重新加載。 同時你也可以在package.json中的vue字段（這里有時間在研究）
配置選項：
首先頁面里面出現這個 沒有就自己寫
每次在用的時候都是直接從網上找一個復制下來，用到哪個地方修改哪里，但是一直不知道具體是怎么操作，怎么使用，畢竟這關系到項目的架構，還是直接明白所有的用法靠譜，最后會寫一個復制用的，但是還是順着看完。
首先是 publicPath
{
Type(類型): string
Default(默認): '/'
}
1.項目部署的基礎路徑
2.我們默認假設你的應用將會部署在域名的根部，
3.比如 https://www.my-app.com/
4.如果你的應用時部署在一個子路徑下，那么你需要在這里
指定子路徑。比如，如果你的應用部署在
https://www.foobar.com/my-app/
那么將這個值改為 `/my-app/`
拓展：把開發服務器假設在根路徑，可以直接使用一個判斷
publicPath :process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
outputDir (基本不動，打包目錄不都是用那個嗎)
{
Type(類型): string
Default(默認): 'dist'
}
1.將構建好的文件輸出到哪里（或者說將編譯的文件），當運行 vue-cli-service build 時生成的生產環境構建文件的目錄。注意目標目錄在構建之前會被清除 (構建時傳入 --no-clean 可關閉該行為)。
assetsDir (基本上都是默認)
{
Type(類型): string
Default(默認): ''
}
1.放置生成的靜態資源 (js、css、img、fonts) 的目錄。
注(我沒懂)：從生成的資源覆寫 filename 或 chunkFilename 時，assetsDir 會被忽略。
indexPath (沒動過)
{
Type(類型): string
Default(默認): 'index.html'
}
1.指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也可以是一個絕對路徑。
filenameHashing (默認就行)
{
Type(類型): boolean
Default(默認): true
}
1(摘錄).默認情況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存。然而，這也要求 index 的 HTML 是被 Vue CLI 自動生成的。如果你無法使用 Vue CLI 生成的 index HTML，你可以通過將這個選項設為 false 來關閉文件名哈希。
注意：這個是比較重要的有延伸，vue感覺上側重於單頁面應用，意思就是只有一個頁面，里面的操作都是通過組件的切換來完成的但是你也可以使用多頁面
單頁面應用（spa）
概念：只有一個html頁面，所有跳轉方式都是通過組件切換完成的。
優點：頁面之間跳轉流暢、組件化開發、組件可復用、開發便捷、易維護。
缺點：首屏加載較慢，加載整個項目中使用的css、js，SEO優化不好。
多頁面應用（mpa）
概念：整個項目有多個html，所有跳轉方式都是頁面之間相互跳轉的。
優點：首屏加載較快，只加載本頁所使用的的css、js，SEO優化較好。
缺點：頁面跳轉較慢。
vue 如何實現多頁面應用 https://www.jianshu.com/p/eceb2ac9df90
vue中如何配置多頁面配置 https://www.jianshu.com/p/52c4913e0bf4
pages (我相信將來我會用到的)
{
Type(類型): Object
Default(默認): undefined
}
1.在 multi-page（多頁）模式下構建應用。每個“page”應該有一個對應的 JavaScript 入口文件。
舉例子：
// 用於多頁配置，默認是 undefined
pages: {
index: {
// 入口文件
entry: 'src/main.js', /*這個是根入口文件*/
// 模板文件
template: 'public/index.html',
// 輸出文件
filename: 'index.html',
// 頁面title
title: 'Index Page'
},
// 簡寫格式
// 模板文件默認是 `public/subpage.html`
// 如果不存在，就是 `public/index.html`.
// 輸出文件默認是 `subpage.html`.
subpage: 'src/main.js' /*注意這個是*/
},
lintOnSave (默認)
{
Type(類型): boolean | 'error'
Default(默認): true
}
1. 是否在保存的時候使用 `eslint-loader` 進行檢查。 有效的值：`ture` | `false` | `"error"` 當設
置為 `"error"` 時，檢查出的錯誤會觸發編譯失敗。
3. 是否在保存的時候使用 `eslint-loader` 進行檢查。
4. 有效的值：`ture` | `false` | `"error"`
5. 當設置為 `"error"` 時，檢查出的錯誤會觸發編譯失敗。
runtimeCompiler (默認 我沒用過)
{
Type(類型): boolean
Default(默認): false
}
1. 是否使用帶有瀏覽器內編譯器的完整構建版本
2. 設置為 true 后你就可以在 Vue 組件中使用 template 選項了，
但是這會讓你的應用額外增加 10kb 左右。
transpileDependencies (沒用過)
{
Type(類型): Array<string | RegExp>
Default(默認): []
}
1. 默認情況下 babel-loader 會忽略所有 node_modules 中的文件。
如果你想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來
3. babel-loader 默認會跳過 node_modules 依賴。
4. 通過這個選項可以顯式轉譯一個依賴。
productionSourceMap (就只是知道這么個意思)
{
Type(類型): boolean
Default(默認): true
}
1. 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。
crossorigin (不知道)
{
Type(類型): string
Default(默認): undefined
}
1.在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標簽上啟用 Subresource Integrity
(SRI)。如果你構建后的文件是部署在 CDN 上的，啟用該選項可以提供額外的安全性。
Webpack相關配置
configureWebpack
Type:Object | Function
1.如果這個值是一個對象，則會通過 webpack-merge 合並到最終的配置中。
2.如果這個值是一個函數，則會接收被解析的配置作為參數。
該函數及可以修改配置並不返回任何東西，也可以返回一個被克隆或合並過的配置版本。
chainWebpack
Type: Function
1.是一個函數，會接收一個基於 webpack-chain 的 ChainableConfig 實例。
允許對內部的 webpack 配置進行更細粒度的修改。
Css相關配置
// CSS 相關選項
css: {
extract: true,
Type: boolean | Object
1. 將組件內的 CSS 提取到一個單獨的 CSS 文件 (只用在生產環境中)
2. 也可以是一個傳遞給 `extract-text-webpack-plugin` 的選項對象
sourceMap: false,
{
Type(類型): boolean
Default(默認): false
}
1. 是否開啟 CSS source map？ 設置為 true 之后可能會影響構建的性能。
loaderOptions: {},
{
Type(類型): Object
Default(默認): {}
}
1. 為預處理器的 loader 傳遞自定義選項。比如傳遞給
2. sass-loader 時，使用 `{ sass: { ... } }`。
modules: false
{
Type(類型): boolean
Default(默認): false
}
1.為所有的 CSS 及其預處理文件開啟 CSS Modules。
2. 這個選項不會影響 `*.vue` 文件。
},
// 在生產環境下為 Babel 和 TypeScript 使用 `thread-loader`
// 在多核機器下會默認開啟。
parallel: require('os').cpus().length > 1,
// PWA 插件的選項。
// 查閱 https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-pwa
pwa: {},
代理配置
如果你的前端應用和后端 API 服務器沒有運行在同一個主機上，
你需要在開發環境下將 API 請求代理到 API 服務器。
這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。
我們前邊的 axios 就說了
// 配置 webpack-dev-server 行為。
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: {
'/api': {
target: 'http://localhost:8880',
changeOrigin: true,
secure: false,
// ws: true,
pathRewrite: {
'^/api': '/static/mock'
// 請求數據路徑別名,這里是注意將static/mock放入public文件夾
}
}
},
before: app => {}
},
簡潔版 很多都是默認的 不需要修改
module.exports = {
// publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',
//基本路徑
publicPath: './',//默認的'/'是絕對路徑，如果不確定在根路徑，改成相對路徑'./'
// 輸出文件目錄
outputDir: 'dist',
assetsDir: 'static',
indexPath: 'index.html',
// eslint-loader 是否在保存的時候檢查
lintOnSave: true,
// 生產環境是否生成 sourceMap 文件
productionSourceMap: false,
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
},
// webpack-dev-server 相關配置
devServer: {
open: false,//open 在devServer啟動且第一次構建完成時，自動用我們的系統的默認瀏覽器去打開要開發的網頁
host: '0.0.0.0',//默認是 localhost。如果你希望服務器外部可訪問，指定如下 host: '0.0.0.0'，設置之后之后可以訪問ip地址
port: 8080,
hot: true,//hot配置是否啟用模塊的熱替換功能，devServer的默認行為是在發現源代碼被變更后，通過自動刷新整個頁面來做到事實預覽，開啟hot后，將在不刷新整個頁面的情況下通過新模塊替換老模塊來做到實時預覽。
https: false,
hotOnly: false,// hot 和 hotOnly 的區別是在某些模塊不支持熱更新的情況下，前者會自動刷新頁面，后者不會刷新頁面，而是在控制台輸出熱更新失敗
proxy: {
'/': {
target: 'http://xxxx:8080', //目標接口域名
secure: false, //false為http訪問，true為https訪問
changeOrigin: true, //是否跨域
pathRewrite: {
'^/': '/' //重寫接口
}
}
}, // 設置代理
before: app => { }
},
// 第三方插件配置
pluginOptions: {
// ...
}
};
總結 （重要）：
1.
vue在工程化開發的時候依賴於 webpack ,而webpack是將所有的資源整合到一塊后形成一個html文件 一堆 js文件, 如果將vue實現多頁面應用,就需要對他的依賴進行重新配置,也就是修改webpack的配置文件.
vue的開發有兩種，一種是直接的在script標簽里引入vue.js文件即可，個人感覺做小型的多頁面會比較舒坦，一旦做大型一點的項目，還是離不開webpack。所以另一種方法也就是基於webpack和vue-cli的工程化開發。
2.
webpack 有個特性，基本的功能都是可以用配置去實現的，所以就造成一個特點“很容易忘記它”，所以就很有必要記錄一下
簡述一下
webpack 分為
Entry：入口
Output: 出口
Module 模塊
Plugin 插件
DevServer 服務器配置
我覺得這也是，為什么很多公司會問你 有沒有配置過 webpack 等等的一些問題 webpack 符合自身的運轉流程，但是通過配置去實現相應的操作的 所以啊配置都不會 你還玩毛線啊，還真就是寫個頁面玩啊，唉 不盡感嘆自己的水平低了