vueプロジェクトパッケージ時にライブラリを離れるファイル
16034 ワード
目的:すべてのライブラリファイルを提出し、プロジェクトをパッケージ化するときにこれらのライブラリファイルをパッケージしません.簡易v u ecolor{red}{vue}vueプロジェクトの例:
1.ライブラリファイルを
2.エントリファイル
3.プロジェクトにおいて直接使用される、例えば
4.その後、
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
のファイルは圧縮コンパイルされません.