使用Webpack在vue.js项目中使用(’@’)登录路径进行ES6导入

2020/10/06 23:01 · javascript ·  · 0评论

我正在开始一个新的vue.js项目,所以我使用了vue-cli工具来搭建一个新的webpack项目(即vue init webpack)。

在浏览生成的文件时,我注意到文件中的以下导入src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // <- this one is what my qusestion is about

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }
    ]
})

我之前没有@在路径中看到at符号()。我怀疑它允许相对路径(也许吗?),但我想确保我了解它的真正作用。

我尝试在线搜索,但找不到解释(可能是因为搜索“在符号处”或使用文字字符@不能作为搜索条件)。

@条路径的作用是什么(链接到文档非常好),这是es6吗?一个webpack的东西?vue-loader东西?

更新

感谢Felix Kling向我指出了另一个关于同一问题的重复的stackoverflow问题/答案。

虽然在其他stackoverflow帖子上的评论不是对该问题的确切答案(在我看来,这不是babel插件),但确实为我指出了正确的方向。

在为您准备的vue-cli脚手架中,基本的webpack配置的一部分为.vue文件设置了别名:

项目中的别名位置

这既有道理,因为它为您提供了src文件中的相对路径,并且消除.vue了导入路径末尾对的要求(通常是您需要的)。

谢谢您的帮助!

这是通过Webpackresolve.alias配置选项完成的,并不特定于Vue。

在Vue Webpack模板中,Webpack配置为替换@/srcpath

  const path = require('path');

  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      ...
      '@': path.resolve('src'),
    }
  },
  ...

别名用作:

import '@/<path inside src folder>';

另外请记住,您也可以在tsconfig中创建变量:

"paths": {
  "@components": ["src/components"],
  "@scss": ["src/styles/scss"],
  "@img": ["src/assests/images"],
  "@": ["src"],
}

可以将其用于命名约定:

import { componentHeader } from '@components/header';

我通过以下组合克服了

import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'

IDE将停止警告uri,但这会在编译时在“ build \ webpack.base.conf.js”中导致无效的uri。

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'src': resolve('src'),
  }
},

宾果!

resolve('src')
对我无效,但path.resolve('src')有效

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

也许尝试添加webpack。mix.webpackConfig引用laravel mix

mix.webpackConfig({

    resolve: {
        alias: {
            '@imgSrc': path.resolve('resources/assets/img')
        }
    }
});

然后在使用中。

<img src="@imgSrc/logo.png" />

某些东西一定已经改变了。此处给出的答案不再正确。 Chapter09中的该项目在其导入语句中使用@符号,但是webpack.config.js文件没有路径解析语句:

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

module.exports = service.resolveWebpackConfig()
本文地址:http://javascript.askforanswer.com/shiyongwebpackzaivue-jsxiangmuzhongshiyongdenglulujingjinxinges6daoru.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!