目的：将所有的库文件提出来，项目打包时不打包这些库文件。
以一个简易 项目举例：
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
2.入口文件index.html文件中引入
<link rel="stylesheet" href="static/css/base.css">
<link rel="stylesheet" href="static/css/iview.css">
<script src="static/js/vue.min.js"></script>
<script src="static/js/iview.js"></script>
<script src="static/js/vuex.min.js"></script>
<script src="static/js/vue-router.min.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/es6-promise.auto.min.js"></script> <!--使不支持promise(例如IE)的浏览器支持promise-->
3.在项目中直接使用，例如src/main.js配置(这里将axios,router,vuex都写在了一起为了方便说明)。
// import Vue from 'vue' 不需要
//直接使用 Vue
import App from './App'
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'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.interceptors.request.use((config) => {
//......(发送请求前,对提交数据做处理)
return config
},(error) =>{
return Promise.reject(error)
})
axios.interceptors.response.use((res) =>{
//......(对响应数据做处理)
return res;
}, (error) => {
return Promise.reject(error)
})
//import Router from 'vue-router' 不需要
//Vue.use(Router) 不需要
//直接使用 VueRouter
const router = new VueRouter({
mode: 'history',
routes:[
{
path: '/',
name: 'home',
component: () => import('@/components/index')
},
{
path: '/login',
name: 'login',
component: () => import('@/components/login/index')
}
]
})
//import Vuex from 'vuex' 不需要
//Vue.use(Vuex) 不需要
//直接使用 Vuex
const store = Vuex.Store({
state:{
isLoding:false,
},
getters:{
isLoding(state){ return state.isLoding } ,
},
mutations:{
loadingSet(state,bool){ state.isLoding = !!bool ? true : false },
},
actions:{
loading(context,bool){ context.commit('loadingSet',bool) },
}
})
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
4.然后 npm run build 打包时就不会把static中的文件压缩编译到一起。
