Vue技术栈开发实战（一）——自定义项目目录结构和跨域配置

使用Vue UI创建、管理项目

vue ui   // 启动Vue UI

项目结构目录

mock中的index.js

import Mock from 'mockjs'

export default Mock

安装mockjs开发依赖

npm i mockjs -D

router中的index.js

import Vue from 'vue'
import Router from 'vue-router'

import routes from './router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router中的router.js

import Home from '../views/Home.vue'

export default [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

store中的index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import user from './module/user'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules: {
    user
  }
})

state.js，mutations.js，actions.js内容

export default {}

store中的module中的user.js

const state = {}

const mutations = {}

const actions = {}

export default {
  state,
  mutations,
  actions
}

然后要改一下main.js中的引入，默认会引入文件夹下的index.js文件，所以可以省略

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

最后新建vue.config.js文件，进行基本配置和跨域配置

const path = require('path')
const resolve = dir => path.join(__dirname, dir)

// 如果是生产环境，路径就要指定到域名的/iview-admin/下，如果是开发环境就只要/
const BASE_URL = process.env.NODE_ENV === 'prodution' ? '/iview-admin/' : '/'

module.exports = {
  publicPath: BASE_URL,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_c', resolve('src/components'))
  },
  // 打包时不生成.map文件，减少打包后的体积
  productionSourceMap: false,
  // 会告诉服务器将没有匹配到静态文件的请求代理到http://localhost:8080来满足跨域的需求
  devServer: {
    proxy: 'http://localhost:8080'
  }
}