vue项目打包时分离库文件

目的:将所有的库文件提出来,项目打包时不打包这些库文件。
以一个简易 v u e \color{red}{vue} 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 

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>   

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: ''
})

4.然后 npm run build 打包时就不会把static中的文件压缩编译到一起。

你可能感兴趣的:(vue)