① Vue-cli-4-路由配置文件，路由進階，二級路由
vue.config.js 是vue的配置文件，必須創建在 demo根目錄 下，該配置文件中，只能使用commonjs模塊化語法，使用mole.export導出，格式如下圖。
@符號代表src資源目錄，在vue.config.js文件中將路徑解析，path.resolve是拼接路徑方法。將@c定義為當前絕對路徑
@c代表src目錄下的components文件，@v代表src目錄下的views文件，其他同理，後續在其他文件中引入文件時，只需要使用以下方法即可導入，不會隨著文件目錄的改變而改變。
1.路由模式
2.路由元信息
meta屬性，配置路由的元信息，其實就是在每個路由身上配置一份數據
3.路由守衛
在meta對象中，可以配置一個roles屬性，其中可以配置路由的訪問許可權，下圖中可訪問的人已標記為admin，vip及user
其次，在 router.beforeEach 及 router.AfterEach 中可以配置信息
router.beforeEach 是路由前置守衛，每次跳轉路由之前，都會攔截，其中next()方法表示下一步（跳轉）,其中是一個回調函數，其中有三個參數to,from,next
router.AfterEach是 路由後置守衛，其中可以將頁面的title設置為meta屬性中設置的title,其中是一個回調函數，其中有兩個參數to,from
瀏覽器的訪問許可權可以在application中的session storage中添加一個roles：admin，如果路由信息中meta中未設置roles，則無法訪問該設置了roles屬性的路由頁面
安裝： npm install nprogress（給路由頁面的跳轉添加一個上方的進度條）
導入：
首先在頁面views中創建一個文件夾，然後在該文件夾中創建兩個二級路由頁面，如下圖所示
然後在所需要創建二級路由的一級路由創建信息中添加一個 children數組 ，該數組中添加二個對象，每個對象就是該一級路由頁面的一個二級路由頁面，如下圖所示，該二級路由信息中的component信息採用了 路由懶載入 的方式導入
然後在一級路由頁面one.vue中寫入二級路由頁面的router-link導航和router-view
最終效果如下圖所示
② webpack打包VUE項目讀取外部配置文件，靈活配置域名
1.在index.html中引入js
<script src="./static/config.js"></script>
2.man.js
③ vue.config.js 配置
vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動載入。你也可以使用 package.json 中的 vue 欄位，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。
在根目錄中創建 vue.config.js
這個文件應該導出一個包含了選項的對象：
publicPath
把開發伺服器架設在根路徑，可以使用一個條件式的值：
outputDir
assetsDir
indexPath
filenameHashing
pages
其值應該是一個對象，對象的 key 是入口的名字，value 是：
lintOnSave
runtimeCompiler
transpileDependencies
proctionSourceMap
crossorigin
integrity
Webpack相關配置
configureWebpack
chainWebpack
css.moles
css.extract
css.sourceMap
css.loaderOptions
支持的 loader 有：
devServer
devServer.proxy
parallel
pwa
pluginOptions
④ 如何在啟動 Vue 程序之前讀取本地靜態文件內容
有這樣一個需求，就是希望通過本地的 Json 文件來寫入一些內容，比如請求後端介面的 API 前綴，我們在 public 目錄下面新建一個 project.config.json 文件來做一些配置項：
這樣有一個好處就是項目打包發布之後的文件也可以通過更改這個靜態文件來改變一些配置項，省的因為頻繁更改配置，而需要重新打包
然後我們在程序的主文件 main.js 中來通過請求這個靜態文件，然後將讀取的結果存在 Vue 的全局屬性 $config 下面
那麼接下來我們還需要在 Vue 程序實例化之前就執行 getConfig() 方法 ，這樣才能確保我們在請求後端介面的時候能提前拿到 API 的 baseUrl
是不是很靈活，應該還有很多的場景能夠用到該方法。
⑤ webpack打包vue項目，可修改配置文件
vue項目打包完成後，如需改變配置文件中的信息，比如域名修改（如下圖config.js），是不可能在配置文件中直接更改的，因為配置文件是前端寫死的，這時只能手動更改項目中的配置，然後重新打包npm run build
var packConfig = require('../src/config')//引入原配置文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin')//引入插件
var createServerConfig = function(compilation){//聲明轉換函數，將對象轉為json字元串
return JSON.stringify(packConfig)
}
plugins里添加
new GenerateAssetPlugin({//生成文件，並添加入內容
filename: 'config.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
})
import axios from 'axios'//引入一個ajax封裝工具
import storage from 'services/storage'//引入對緩存操作的封裝工具
var getConfigJson = function () {
//聲明一個函數，用來讀取json文件並將其內容存入緩存
axios.get('config.json').then((result) => {
//讀取文件
storage.setItem('config', result.data)
}).catch((error) => {
console.log(error)
})
}
⑥ vue打包後生成可配置文件，用於修改介面路徑等
vue打包發布後，如果介面地址等發生變更，需要重新打包，過於繁瑣。因此需要將一些例如介面地址、網站參數等拿出來動態配置。
具體步驟如下：
1、安裝generate-asset-webpack-plugin插件
npm install generate-asset-webpack-plugin --save-dev
2、在vue.config.js中配置如下：
3、使用
在main.js中全局引入
4、打包後dist下生成.json文件，修改介面後生效
如果你有更好的方法也請留言哦。。。
⑦ electron-vue 項目啟動動態獲取配置文件中的後端服務地址
最近的項目迭代中新增一個需求，需要在electron-vue 項目打包之後，啟動exe 可執行程序的時候，動態獲取配置文件中的 baseUrl 作為服務端的地址。electron 可以使用 node 的 fs 模塊來讀取配置文件，但是在項目打包之後項目的靜態資源都會被編譯成其他文件，本文來記錄下相關實現和知識點。
這里需要注意 electron-builder 中兩個常用的配置選項：extraResources 拷貝資源到打包後文件的 Resources 目錄中，extraFiles 拷貝資源到打包目錄的根路徑下，這里使用extraResources ,其中 from 表示需要打包的資源文件路徑，to 值為 「../」 表示根路徑。
代碼如下：
打包之後配置文件會被拷貝過來
同樣，頁面也能拿到對應的數據，這樣就可以通過修改配置文件，動態修改連接服務端ip了。
文章來自https://www.cnblogs.com/zaishiyu/p/16358578.html