vue配置config ‘./.../.../***/**.vue’路径别名
cli-4的脚手架配置
因为组件的引用,经常会遇到import * from '../../../components/common/***.vue‘这样的引入格式,太复杂了,所以可以在vue里面配置路径别名
首先在最外层,和package.json同级目录里面新建一个vue.config.js作为扩展配置。
代码如下
const path = require('path')
module.exports = {
configureWebpack: (config) => {
Object.assign(config, {
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
})
}
}
标红的就是路径重定义。__dirname是总文件的目录路径必须要引入
const path = require('path'),然后再使用path.resolve方法
vue配置config ‘./.../.../***/**.vue’路径别名的更多相关文章
- vue项目中的路径别名
每次写引入组件的路径,如果路径嵌套比较深,那么会比较麻烦,我们可以在webpack.base.conf.js,中设置路径的别名,默认webpack设置src的别名为@ 建议配置src下一级目录的别名, ...
- 【vue-cli 3.0】 vue.config.js配置 - 路径别名
如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...
- vue项目,webpack中配置src路径别名及使用
1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- 基于webpack的vue项目路径别名
在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件: import userinfo from '../../../components/userinfo.vue'; 使用.. ...
- webstorm中不能识别react、vue alias 路径别名符号
https://blog.csdn.net/weixin_37939942/article/details/89388466 因为我平时比较喜欢使用ws做开发,所以在使用vue或react的时候只要使 ...
- Vue之vue中的data为什么是一个函数+vue中路径别名alias设置
问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...
- 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令
一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
- typescript项目配置路径别名(路径映射)
在vue项目中,我们可以利用“@”来指代src目录,在普通webpack项目中,我们也可以通过配置webpack的config来指定路径别名,但是在typescript+webpack项目中我们该怎么 ...
随机推荐
- 无法打开物理文件 XXX.mdf",操作系统错误 5.5(拒绝访问) 的解决办法
用T-SQL命令附加数据库时,出现如下异常信息: 无法打开物理文件 XXX.mdf".操作系统错误 5:"5(拒绝访问.)". (Microsoft SQL Server ...
- oracle 提取文本中的数字
提取文本中的数字部分,并转换为数字 TO_NUMBER(regexp_substr(AGE,'[0-9.]+'))
- 「CF1042F」Leaf Sets
传送门 Luogu 解题思路 比较显然的一种做法: 我们把一个点的子树高度抠出来并排序记为 \(L_i\),找到最大的 \(i\) 使得 \(L_{i-1}+L_i\le K\). 于是我们把前 \( ...
- 吴裕雄 python 神经网络——TensorFlow训练神经网络:不使用隐藏层
import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data INPUT_NODE = 784 ...
- pip-9.0.1更新到pip-10.0.1遇到的问题
使用 pip 安装第三方库时,报错: You are using pip version 9.0.3, however version 10.0.1 is available. You should ...
- 在Windows上使用Docker运行.NET COE应用
在Windows上使用Docker运行.NET COE应用 执行步骤: 1:安装Docker For Windows(注意:docker for windows-64位Windows 10.必须开启 ...
- 教育片- Economics by Crash Course(共35集)(未完结)
第一集Intro to Economics: Crash Course Econ #1 传送门:https://www.youtube.com/watch?v=3ez10ADR_gM&list ...
- MRCP接口MRCPRecog 简介
功能:开始一个语音识别,一边讲话,一边识别,需要ASR服务器. 原型:MRCPRecog (grammar, options) grammar ---- 语法文件,可以是一个xml文件 options ...
- jquery移除click事件
原文链接:https://blog.csdn.net/weixin_41228949/article/details/83142661 在html中定义click事件有两种方式,针对这两种方式有两种移 ...
- vue父孙组件传值($attr及$listeners)的使用
父组件 <template> <div> <!-- 将值传给子组件 子组件可以获取自己想要的值 也可以忽视掉需要传给孙子组件的值 --> <!-- 同时获取通 ...