admin管理员组

文章数量:1127697

I'm starting a new vue.js project so I used the vue-cli tool to scaffold out a new webpack project (i.e. vue init webpack).

As I was walking through the generated files I noticed the following imports in the src/router/index.js file:

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

    Vue.use(Router)

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

I've not seen the at sign (@) in a path before. I suspect it allows for relative paths (maybe?) but I wanted to be sure I understand what it truly does.

I tried searching around online but wasn't able to find an explanation (prob because searching for "at sign" or using the literal character @ doesn't help as search criteria).

What does the @ do in this path (link to documentation would be fantastic) and is this an es6 thing? A webpack thing? A vue-loader thing?

UPDATE

Thanks, Felix Kling for pointing me to another duplicate stackoverflow question/answer about this same question.

While the comment on the other stackoverflow post isn't the exact answer to this question (it wasn't a babel plugin in my case) it did point me in the correct direction to find what it was.

In the scaffolding that vue-cli cranks out for you, part of the base webpack config sets up an alias for .vue files:

This makes sense both in the fact that it gives you a relative path from the src file and it removes the requirement of the .vue at the end of the import path (which you normally need).

Thanks for the help!

I'm starting a new vue.js project so I used the vue-cli tool to scaffold out a new webpack project (i.e. vue init webpack).

As I was walking through the generated files I noticed the following imports in the src/router/index.js file:

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

    Vue.use(Router)

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

I've not seen the at sign (@) in a path before. I suspect it allows for relative paths (maybe?) but I wanted to be sure I understand what it truly does.

I tried searching around online but wasn't able to find an explanation (prob because searching for "at sign" or using the literal character @ doesn't help as search criteria).

What does the @ do in this path (link to documentation would be fantastic) and is this an es6 thing? A webpack thing? A vue-loader thing?

UPDATE

Thanks, Felix Kling for pointing me to another duplicate stackoverflow question/answer about this same question.

While the comment on the other stackoverflow post isn't the exact answer to this question (it wasn't a babel plugin in my case) it did point me in the correct direction to find what it was.

In the scaffolding that vue-cli cranks out for you, part of the base webpack config sets up an alias for .vue files:

This makes sense both in the fact that it gives you a relative path from the src file and it removes the requirement of the .vue at the end of the import path (which you normally need).

Thanks for the help!

• javascript
• webpack
• ecmascript-6
• vue.js

Share Improve this question Follow edited Feb 29, 2024 at 11:11 Harrison 2,2971212 gold badges2121 silver badges4444 bronze badges asked Mar 12, 2017 at 16:31 Chris SchmitzChris Schmitz 20.9k3131 gold badges9090 silver badges151151 bronze badges 9

• 4 See my comment. – Felix Kling Commented Mar 12, 2017 at 16:47
• 4 @FelixKling It is not an exact duplicate because it doesn't answer the whole question, is this an es6 thing? A webpack thing? A vue-loader thing? – Estus Flask Commented Mar 12, 2017 at 16:52
• 1 Yeah, I think the question was similar but not a duplicate. Regardless I figured out where it was coming from and updated the question with an explanation since I can't add it as an answer. – Chris Schmitz Commented Mar 12, 2017 at 16:56
• 1 @estus: the answer makes it pretty clear that it isn't part of ES6 but a webpack configuration thing, don't you think? And that's exactly the case here as well, only that the nature of the configuration is a bit different. – Felix Kling Commented Mar 12, 2017 at 17:05
• 1 @FelixKling It depends. But since the question you've linked doesn't have detailed answer that explains what's up with Webpack, it may probably deserve an answer. Usually having 'Possible duplicate of ...' comment is enough to designate the link between the questions, and vox populi does the rest. I've seen the questions being over-duped on SO too often. – Estus Flask Commented Mar 12, 2017 at 17:40

 |  Show 4 more comments

12 Answers 12

Sorted by: Reset to default 381

This is done with Webpack resolve.alias configuration option and isn't specific to Vue.

In Vue Webpack template, Webpack is configured to replace @/ with src path:

  const path = require('path');

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

The alias is used as:

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

Also keep in mind you can create variables in tsconfig as well:

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

This can be utilized for naming convention purposes:

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

I get over with following combination

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

IDE will stop warning the uri, but this causes invalid uri when compile, in "build\webpack.base.conf.js"

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

Bingoo!

Maybe try adding in webpack. mix.webpackConfig references laravel mix.

mix.webpackConfig({

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

And then in vue use.

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

resolve('src') no works for me but path.resolve('src') works

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

Something must have changed. The answer given here is no longer correct. This project in Chapter09 uses the @ sign in its import statements but the webpack.config.js file doesn't have a path resolve statement:

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()

A similar approach used in Vue3 and Vite, the alias can be found in vite.config.js

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJsx()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

In simple words, the "@" symbol is used as "src" when importing files/components.

I have configured my webpack.common.js file like below

resolve: {
  extensions: [".ts", ".js", ".vue"],
  alias: {
      '@': path.resolve(__dirname,'src/')
  }
}

I have imported the vuex store like this import store from "@/store"; instead of import store from "../store"

You can read more about Webpack Aliases in Vue here

An example to apply in Next.js would be to use the file next.config.js to add the next content.

const path = require('path');

module.exports = {
  webpack: (config, options) => {
    config.resolve.alias = {
      '@': path.resolve(process.cwd(), 'src'),
    };
    return config;
  }
};

It refers to an alias path found in your config.js file

@ refers to the src folder inside your root directory, it can be configured while bootstrapping your app.

We sometimes use '@' to import from a components directory with a path "src/components/Add.vue". If we need to access this file from a diff directory like "src/views/AboutView.vue", we can use this to import Add.vue inside AboutView.vue as import Add from "@/components/Add.vue", inside your tag. This is the same as using import Add from "../components/Add.vue" '@' points to the root directory of your app(src folder)

本文标签： javascriptWhat does themean inside an import pathStack Overflow