Vue 项目中使用webpack设置别名，但导入的时候找不到

Question

问题如题所述，图如下所示

看了好几篇文章，各种都试过，然而都没有成功

新手不晓得问题出在了哪些，有哪位大佬能帮忙看看吗？

Answer 1

还没解决嘛。。
vue-cli2创建的话，修改根目录下build/webpack.base.conf.js
resolve这一项

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@router': resolve('./src/router/index'),
      ...
    }
  }
}

加./和不加都可以，resolve里是默认根目录的

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

改的build里的文件得重新跑才能生效，需要重新npm start

main.js里可以直接import router form '@router'引用
但是你引得文件必须得存在，而且里面要有export default，router一般就是export default new Router(...)
如果是import { router } form '@router'就不要default了

这样还是不行，那你重新创建一个vue项目试试。把src里都复制过来就行，build里就那么改，别改别的

Answer 2

你这应该是路径问题，确认下路径。试试把'@js':resolve('./src/assets/js')改成'@js':resolve('src/assets/js')

Answer 3

./去掉试试
别名是个路劲，不是文件，router应该是错的
然后就是修改了配置文件要重启项目

Answer 4

不需要./ 改完之后重启一下项目