vueプロジェクトパッケージ時にライブラリを離れるファイル

16034 ワード

目的:すべてのライブラリファイルを提出し、プロジェクトをパッケージ化するときにこれらのライブラリファイルをパッケージしません.簡易v u ecolor{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構成(ここでは、説明を容易にするために、axiosroutervuexが一緒に記載されている).
// 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のファイルは圧縮コンパイルされません.