分享一个vue项目“脚手架”项目的实现步骤

//需要拦截的请求头
return config
})
export default store;

在main.js引入

import store from '@/store/main.js';

main.js的最终形式

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios';
import "babel-polyfill";
import store from '@/store/main.js';
//自定义全局mixin
import mixins from '@/components/common/mixins'
Vue.mixin(mixins)
//自定义全局指令
import directive from '@/components/common/directive'
Vue.use(directive)
Vue.config.productionTip = false
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

解决vue-cli 初始配置的打包路径问题

其实这个在上面文件中已经有体现了，在这里再次提及一下。

步骤1：修改config>index.js文件

将build{ }下的assetsPublicPath改为如下

assetsPublicPath: './',

步骤2：修改build>utils.js文件

找到 fallback: ‘vue-style-loader’，在其下加入下面这一行

publicPath: '../../'

结语

至此，一个基本完备的vue项目“脚手架”就完成了，以后每次初始化项目都可以按照这套方案来进行，省去了很多协作开发的交流环节，形成了能够满足大多数项目的目录及文件构成形式，将此项目托管至私服每次初始化项目只需拉取这个“脚手架”便能省区不少初始化项目的时间，岂不美哉！

此“脚手架”项目已开源至github，欢迎大家提出建议和互相交流，同时也可随意将项目拉下来进行使用。

A scaffolding based on vue.js