Webstorm那些事之识别vue项目@根路径符号

问题描述相信大家在开发过程中一定碰到过vue项目中识别不了@符号（代表项目根路径），就像下面这个图一样：代码下方一直有webstorm的提示波浪线，Module is not found 或者 Module is not install，使用Ctrl + 鼠标左键也点不进去，很是头大问题解决安装 @vue/cli-servicenpm install @vue/cli-service --sav

crazyJialin

5462人浏览 · 2020-06-15 11:25:08

crazyJialin · 2020-06-15 11:25:08 发布

问题描述

相信大家在开发过程中一定碰到过vue项目中识别不了@符号（代表项目根路径），就像下面这个图一样：
在这里插入图片描述

代码下方一直有webstorm的提示波浪线，Module is not found 或者 Module is not install，使用Ctrl + 鼠标左键 也点不进去，很是头大

问题解决

安装 @vue/cli-service

npm install @vue/cli-service --save-dev

在项目根目录下创建 webstorm.config.js，并将下面内容粘贴进去

'use strict'
const webpackConfig = require('@vue/cli-service/webpack.config.js')
module.exports = webpackConfig

打开当前项目设置 FIle > Settings 或者 Ctrl + Alt + S，搜索Webpack，将刚刚创建的文件引入

效果

按照上面的步骤执行完成后，就可以看到刚刚识别不了的@符号现在能识别了，并且可以使用Ctrl + 鼠标左键点击后进入对应文件
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^