目的：將所有的庫檔案提出來，專案打包時不打包這些庫檔案。
以乙個簡易 vue
\color
vue專案舉例：
1.將庫檔案放入static資料夾中
├── src
├── static
├── img
├── css
│ ├── fonts
│ │ ├── ionicons.ttf
│ │ └── ionicons.woff
│ ├── base.css
│ └── iview.css
└── js
├── axios.min.js
├── es6-promise.auto.js
├── iview.js
├── vue.min.js
├── vue-router.min.js
└── vuex.min.js
index.html檔案中引入
rel=
"stylesheet"
href
="static/css/base.css"
>
rel=
"stylesheet"
href
="static/css/iview.css"
>
src=
"static/js/vue.min.js"
>
script
>
src=
"static/js/iview.js"
>
script
>
src=
"static/js/vuex.min.js"
>
script
>
src=
"static/js/vue-router.min.js"
>
script
>
src=
"static/js/axios.min.js"
>
script
>
src=
"static/js/es6-promise.auto.min.js"
>
script
>
src/main.js配置(這裡將axios,router,vuex都寫在了一起為了方便說明)。
// import vue from 'vue' 不需要
//直接使用 vue
vue.config.productiontip =
false
//import axios from 'axios' 不需要
//直接使用 axios
vue.prototype.$axios = axios
axios.defaults.timeout =
5000
axios.defaults.baseurl =
'/api'
axios.defaults.headers.post[
'content-type']=
axios.interceptors.request.
use(
(config)
=>
,(error)
=>
)axios.interceptors.response.
use(
(res)
=>
,(error)
=>
)//import router from 'vue-router' 不需要
不需要
//直接使用 vuerouter
const router =
newvuerouter(,
]})//import vuex from 'vuex' 不需要
不需要
//直接使用 vuex
const store = vuex.
store(,
getters:,}
, mutations:,}
, actions:,}
})newvue
()
npm run build打包時就不會把static中的檔案壓縮編譯到一起。 vue打包後分離config配置檔案
用vue cli構建的專案通常是採用前後端分離的開發模式，也就是前端與後台完全分離，此時就需要將後台介面位址打包進專案中，此時如果只是改個介面位址也要重新打包那就太麻煩了，解決方法是直接加個config.js檔案 1.首先我們在static檔案下建立乙個js檔案，就叫config.js吧，內容為 w...
vue專案打包檔案過大優化
總結一下前端打包優化，我用的是vue cli3 配置檔案vue.config.js 一 路由懶載入 每次進入乙個新頁面才載入該頁面所需要的資源 component import view setting setting.vue 二 把不常改變的庫放到index.html中，通過cdn引入 最好引入指...
vue 專案打包
作為乙個前端之前並沒有打包過專案，因此想一下打包的效果，記錄一下我的打包過程 作為乙個開端 首先，專案打包前的目錄結構 然後，執行命令列 npm run build 因為是第一次打包，不熟悉打包的過程，與檔案的變更，首先看了一下檔案的結構，發現沒有compenent與views中檔案的生成目錄。是沒...