A. 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)
})
}
B. 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
C. 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文件，修改介面後生效
如果你有更好的方法也請留言哦。。。
D. 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
最終效果如下圖所示