导航：首页 > 开发技术 >

Vue项目中实用小技巧有哪些

发表于：2025-11-16 作者：千家信息网编辑

千家信息网最后更新 2025年11月16日，这篇文章将为大家详细讲解有关Vue项目中实用小技巧有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。需求一：为路径配置别名在开发过程中，我们经常需要引入各种文件，

千家信息网最后更新 2025年11月16日Vue项目中实用小技巧有哪些

这篇文章将为大家详细讲解有关Vue项目中实用小技巧有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

需求一：为路径配置别名

在开发过程中，我们经常需要引入各种文件，如图片、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

接着，在我们需要引入的文件中就可以直接使用了：

需要注意的是，如果不是通过 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 interceptoraxios.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 interceptoraxios.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: '' }); })};startApp();

就是先用 axios 获取 api 文件，然后再初始化。

需求三：由后台根据用户权限值返回菜单

菜单是树形结构（PS：就算不是树形结构，你也得处理成树形结构），我这里使用的是 ElementUI ，参考了道友的这篇文章，实现如下：

新建一个 Menu.vue 文件，写入如下代码：

这里主要用到两个东西，一个是 render 函数，一个是递归，如果不熟悉 render 函数的道友请点这里。可能有道友会问为什么不用模板，因为······做不到啊?，在 template 中只能有一个根元素，而 Vue 限制了不能对根元素使用 v-for；再者，通过在浏览器中查看代码可以知道，菜单就是 ul 加上 li，如果有了根元素会破坏标签结构（虽然不影响功能，但还是觉得不舒服?）。然后，在需要使用的地方：