关于网友提出的“ vue-cli webpack模板配置alias无效?”问题疑问,本网通过在网上对“ vue-cli webpack模板配置alias无效?”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:
问题: vue-cli webpack模板配置alias无效?描述:
如题
webpack.base.conf.js 配置如下:
src下有Home.vue跟store目录,store下面有个index.js
页面引入:
import store from 'store'
控制台报错:
ERROR in ./src/Home.vue
? https://google.com/#q=import%2Fno-unresolved Unable to resolve path to module 'store'
/Users/xx/Documents/demo/src/Home.vue:35:19
import store from 'store'
^
? 1 problem (1 error, 0 warnings)
Errors:
1 https://google.com/#q=import%2Fno-unresolved
ERROR in ./~/babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/Home.vue
Module not found: Error: Cannot resolve module 'store' in /Users/xx/Documents/demo/src
@ ./~/babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/Home.vue 15:13-29
但是我页面引入时改成相对路径又可以:
import store from './store'
……
重新vue init了一个写了alias确实没问题… 看样子问题出在eslint上,贴一下eslintrc,有空的大神帮我看看
module.exports = {
root: true,
// parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
extends: 'airbnb-base',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
'no-debugger': process.env.NODE_ENV === 'production' ? 1 : 0,
"semi": [2, "never"],
"no-console": [0],
"space-before-function-paren": [2, "always"],
"prefer-const": [0],
"eol-last": [0],
"no-param-reassign": [0],
"no-shadow": [0],
"arrow-body-style": [0],
"comma-dangle": [0],
"space-in-parens": [0],
"prefer-rest-params": [0],
"quote-props": [0],
"func-names": [0],
"guard-for-in": [0],
"object-shorthand": [0],
"no-use-before-define": [0],
"computed-property-spacing": [0],
"consistent-return": [0],
"camelcase": [0],
"no-return-assign": [0],
"no-extend-native": [0],
"no-else-return": [0],
"dot-notation": [0],
"prefer-template": [0],
"no-restricted-syntax": [0],
"no-unresolved": [0]
}
}
解决方案1:
store跟vuex的store冲突了吧 你起个stores试试
解决方案2:import是ES6的语法,原理和require差不多。
当 Node 遇到 require(X) 时,按下面的顺序处理。
1.如果 X 是内置模块(比如 require('http'))
a. 返回该模块。
b. 不再继续执行。
2.如果 X 以 "./" 或者 "/" 或者 "../" 开头
a. 根据 X 所在的父模块,确定 X 的绝对路径。
b. 将 X 当成文件,依次查找下面文件,只要其中有一个存在,就返回该文件,不再继续执行。
X
X.js
X.json
X.node
c. 将 X 当成目录,依次查找下面文件,只要其中有一个存在,就返回该文件,不再继续执行。
X/package.json(main字段)
X/index.js
X/index.json
X/index.node
3.如果 X 不带路径
a. 根据 X 所在的父模块,确定 X 可能的安装目录。
b. 依次在每个目录中,将 X 当成文件名或目录名加载。
4.抛出 "not found"
详见阮一峰老师的文章:http://www.ruanyifeng.com/blo...
解决方案3:不确定alias有没有问题。
但是我的解决方案是:使用webpack的web_modules
http://webpack.github.io/docs...
解决方案4:不确定问题出现在哪里,因为我试着用和你一样的配置并没有复现你的问题,不会是文件夹名字打错了吧。。。
解决方案5:谢邀
应该用root而非alias
https://webpack.github.io/doc...
解决方案6:搞定了
在.eslintrc的'rules'加上:
'import/no-unresolved': 0,