需求一：为路径配置别名
在开发过程中，我们经常需要引入各种文件，如图片、CSS、JS等，为了避免写很长的相对路径（../），我们可以为不同的目录配置一个别名。
找到 webpack.base.config.js 中的 resolve 配置项，在其 alias 中增加别名，如下：
创建一个 CSS 文件，随便写点样式：
.avatar display: flex; justify-content: center; align-items: center; .avatar-img padding 20px border solid 1px #ccc border-radius 5px
接着，在我们需要引入的文件中就可以直接使用了：
<template> <div> <img src="https://www.jb51.net/~img/avatar.png" alt=""> </div> </template> <script> export default { name: "Home" } </script> <style scoped lang="stylus"> @import "~css/avatar"; </style>
需要注意的是，如果不是通过 import 引入则需要在别名前加上 ~，效果如下：
需求二：要求实现在生产包中直接修改api地址
这个需求，怎么说呢，反正就是需求，就想办法实现吧。
假设有一个 apiConfig.js 文件，用于对 axios 做一些配置，如下：
import axios from 'axios'; axios.defaults.timeout = 10000; axios.defaults.retry = 3; axios.defaults.retryDelay = 2000; axios.defaults.responseType = 'json'; axios.defaults.withCredentials = true; axios.defaults.headers.post["Content-type"] = "application/json"; // Add a request interceptor axios.interceptors.request.use(function (config) { // Do something before request is sent return config; }, function (error) { // Do something with request error return Promise.reject(error); }); // Add a response interceptor axios.interceptors.response.use(function (response) { // Do something with response data return response; }, function (error) { // Do something with response error return Promise.reject(error); }); export default axios
在 static 文件夹中增加一个 config.json 文件，用于统一管理所有的 api 地址：
{ "base": "/api", "static": "//static.com/api", "news": "//news.com.api" }
打开 main.js，写入下列代码：
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import axios from 'js/apiConfig'; //import直接引入，不用添加~ Vue.config.productionTip = false; Vue.use(ElementUI); /* eslint-disable no-new */ let startApp = function () { let randomStamp = new Date().getTime(); axios.get(`/static/config.json?t=${randomStamp}`).then((data) => { axios.defaults.baseURL = data.base; //设置一个默认的根路径 Vue.prototype.$axios = axios; Vue.prototype.$apiURL = data; //将所有路径配置挂载到 Vue 原型上 /* eslint-disable no-new */ new Vue({ el: '#app', router, components: {App}, template: '<App/>' }); }) }; startApp();
就是先用 axios 获取 api 文件，然后再初始化。
需求三：由后台根据用户权限值返回菜单
菜单是树形结构（PS：就算不是树形结构，你也得处理成树形结构），我这里使用的是 ，参考了道友的这篇文章，实现如下：
新建一个 Menu.vue 文件，写入如下代码：
<script> export default { name: "MenuItem", props: { data: { type: Array }, collapse: { type: Boolean } }, methods: { //生成菜单项 createMenuItem(data, createElement) { return data.map(item => { if (item.children && item.children.length) { return createElement('el-submenu', {props: {index: item.id.toString()}}, [ createElement('template', {slot: 'title'}, [ createElement('i', {class: item.icon}), createElement('span', [item.title]), ] ), this.createMenuItem(item.children, createElement) //递归 ] ) } else { return createElement('el-menu-item', {props: {index: item.path}}, [ createElement('i', {class: item.icon}), createElement('span', {slot: 'title'}, [item.title]), ] ) } }) }, //选中菜单 onSelect(key, keyPath) { console.log(key, keyPath); } }, render(createElement) { return createElement( 'el-menu', { props: { backgroundColor: "#545c64", textColor: "#fff", activeTextColor: "#ffd04b", collapse: this.collapse, router:true }, class:'el-menu-vertical-demo', on: { select: this.onSelect } }, this.createMenuItem(this.data, createElement) ) } } </script> <style scoped lang="stylus"> .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; } </style>