Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue cli 3 project alias src to @ or ~/ not working

I have installed the project with vue cli 3 but as the project grows, the import on the components are getting ugly, I end up importing a component like

import Component from '../../../../components/folder/Component.vue'

I just want to alias the src folder and do

import Component from '@components/folder/Component.vue'

I did read that I have to modify the vue.config.js, I have done it but the error is the same

Module not found: Error: Can't resolve '@components/Permissions/PermissionsTable'

This is my vue.config.js

  const path = require("path");

  const vueSrc = "./src";

  module.exports = {
    runtimeCompiler: true,
    css: {
      modules: true
    },
    configureWebpack: {
      resolve: {
        alias: {
          "@": path.join(__dirname, vueSrc)
        }
      }
    }
  };

Am I missing something? What else should I do?

like image 620
Carlos Salazar Avatar asked Mar 23 '19 02:03

Carlos Salazar


People also ask

How do I run Vue project in terminal?

Very simple. To launch a VueJs project, you must type "npm run serve".

How do I link Vue to HTML?

The simplest way to get started with Vue is to grab the development version script for it and add it to the head tag of your HTML file. Then you can start Vue code inside the HTML file inside of script tags. And have the Vue code connect up with an existing element on your HTML page.


2 Answers

For Vue CLI you need to create a file in the root folder of project - jsconfig.json

{
  "include": ["./src/**/*"],
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "exclude": ["node_modules"]
}

and that's all, helped me with PhpStorm

like image 123
Vlad Avatar answered Oct 07 '22 05:10

Vlad


I was missing extensions: ['.js', '.vue', '.json'], and in the import I have to use '@/components/...'

like image 44
Carlos Salazar Avatar answered Oct 07 '22 03:10

Carlos Salazar