How to configure Vue CLI 3 to leverage webpack root folder aliases?


#1

With previous Vue CLI I was able to use aliases to keeps my assets in one folder, and linking to the assets wth the short, relative to the app urls. (e.g. @/assets/image.png). However I really stuck with finding the way of doing it with the Vue CLI 3.

I have tried the method explained in the following topic:

which is basically editing the ‘vue.config.js’ file by adding the following setting:

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        querystring: 'querystring-browser' <- in my case I am adding this: '"@": require("path").resolve(__dirname, "src")'
      }
    }
  }
}

Is there any way of achieving this?


#2
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
chainWebpack: config => {
  config.resolve.alias
    .set('@', resolve('src'))
}

#3

the @/ alias is already part of the default configuration of vue-cli 3.

If you want to add additional aliases, use @CaiPeng1989’s code


#4

@LinusBorg thanks for you response. Could you please help me with figuring our why this doesn’t work in my app in this case?

Here is the scenario:

├── App.vue <-- src="@/assets/img.png" <--- in this components image is resolved
├── assets
│   └── logo.png
├── components
│   └── some-other-component.vue <-- src="@/assets/img.png" <--- in this components it's not

I have tried with ./, @/, and ~@/. Non of them worked.

I am using default project setting (babel, and jslint)

Thanks in advance.


#5

I surely can’t figure it out from that sippet, sorry.


#6

@LinusBorg sorry if I am not clear enough. Basically what I am tying to do, is to keep all my assets (mostly images) in the Assets folder of the generated (with the CLI 3) project.

The screenshot below, displays the structure of an empty ‘hello-world’ application, setup with the default configuration (babel, jslint):

image

The default app contains the Vue logo link, which is displayed once the app starts, which is fine,

App.vue file:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

however, if I copy the ‘img’ tag to the lower level component (hello-world.vue), I receive the 'Module not found: Error: Can’t resolve ‘./assets/logo.png’ in ‘c:\TEMP…’ error message.

hello-world.vue file:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
      <img alt="Vue logo" src="./assets/logo.png"> <-- nope, I am not going to work here
    <p>
  </div>
</template>

Now, you say the ‘@’ is is already part of the default configuration, but id doesn’t work anywhere in the the above mentioned components, even in App.vue file . I have trying all the following methods, and none of them worked:

  <img alt="Vue logo" src="./assets/logo.png"> <-- works is App.vue
  <img alt="Vue logo" src="@/assets/logo.png"> <-- doesn't work anywhere
  <img alt="Vue logo" src="~@/assets/logo.png"> <-- doesn't work anywhere
  <img alt="Vue logo" :src="./assets/logo.png"> <-- doesn't work anywhere
  <img alt="Vue logo" :src=".@/assets/logo.png"> <-- doesn't work anywhere

Is there anything I am missing?


#7

@CaiPeng1989, thanks for you response. But the solution also didn’t work for me :frowning:


#8

I just created a fresh project and used exactly that in HelloWorld.vue - and it works just like I expected.

Not sure what to tell you…


#9

I just tried to install a clean installation to another computer, which is basically used as media server. I mean nothing related to development was installed ever. And, I am still having the same issue…

Could you kindly check the following details of mine, and let me know if anything is different on your side?

  1. Installed Node version: 8.11.3 (includes npm 5.6.0)
  2. Installed Vue CLI (npm install -g @vue/cli)
  3. Installed Vue CLI Service (npm install -g @vue/cli-service-global)
  4. Created project (vue create project)
  5. Run project (vue serve)

Also, what looks suspisios to me, is that ‘src’ folder of the project, has yet another ‘node_modules’ folder, with included ‘cache’ and ‘vue-loader’ folders.

Thanks in advance for you time.


#10

I can try but expect for the node version of did exactly that.

Can you share the package.json?

Thats definitely wrong and aka not happening for me. No idea why that should happen.

Does it also have a second package.json? Share that as well.

Please also do the following:

  1. vue inspect > config.js. That saves a representation of the webpack config to disk.
  2. Open that file and search for “alias”
  3. You should find an entry defining the said alias.

#11
{
  "name": "prj",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@vue/cli-service": "^3.0.0",
    "vue-template-compiler": "^2.5.17"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

I am using the latest version of Vue CLI (3.0.0), perhaps there is a bug.

No, there no second package.json.

The alias part also looks strange. As you can see from snippet below, there are two ‘src’ folders, however the project structure has only one.

alias: {
  '@': 'c:\\TEMP\\prj\\src\\src',
  vue$: 'vue/dist/vue.runtime.esm.js'
},

Did anyone else report similar behaviors after the CLI update?


#12

So the alias is there, but it’s wrong.

No, we had no such reports so far.


#13

Is there anything else you can suggest?


#14

Oh, there’s something. I have re-read your posts, and saw something I missed before:

5. Run project (vue serve)

vue serve is the command to run a prototype dev server (via @vue/cli-service-global). to run the dev server for a “normal” full project, you would run the appropriate npm script:

npm run serve
# or 
yarn serve

#15

Unbelievable! :joy::joy::joy: I would never thought about it. It’s not something that should be documented, is it?


#16

Well it is documented…

And when you create a new project, the cli alao tells you right in the terminal which command to run.


#17

Yes, just found it. Apologize, my bad…

Thanks a million for your time and kind help. Cheers :slight_smile: