javascript
a minute read (About 136 words)

vue resolve alias config

vuejs默认@ 指向 ./src

创建自定义配置文件

1
touch vue.config.js

配置

定义~components ~store

1
2
3
4
5
6
7
8
9
10
11
12
const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '~components': path.resolve(__dirname, 'src/components'),
        '~store': path.resolve(__dirname, 'src/store')
      }
    }
  }
};

ts.config.json

webpack alias配置后还不够，还需要修改ts.config.json才能正常解析ts

demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": ".",
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "jsx": "preserve",
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ],
        "module": "esnext",
        "moduleResolution": "node",
        "paths": {
            "@/*": [
                "src/*"
            ],
            "~components/*": [
                "src/components/*"
            ],
            "~interfaces/*": [
                "src/interfaces/*"
            ],
            "~store/*": [
                "src/store/*"
            ]
        },
        "sourceMap": true,
        "strict": true,
        "target": "esnext",
        "types": [
            "webpack-env",
            "mocha",
            "chai"
        ]
    },
    "exclude": [
        "node_modules"
    ],
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "tests/**/*.ts",
        "tests/**/*.tsx"
    ]
}
# ,

Like this article? Support the author with

vue create loading component with vuex
Vuejs get Environment Variables

Comments

Categories

Tag Cloud

DASH FFMpeg WebGl WebRTC angular antd docker echartsjs ffmpeg flex git go google immutable keep update koa mac mongodb next.js nginx node nodejs npm nuxt.js nuxtjs pm2 postgres postgresql rabbitmq react redux regexp typescript vim vue vuejs 日语 水彩

Recent

Archives

Tags

DASH 1
FFMpeg 1
WebGl 9
WebRTC 4
angular 3
antd 1
docker 3
echartsjs 3
ffmpeg 1
flex 1
git 7
go 1
google 1
immutable 1
keep update 1
koa 1
mac 1
mongodb 1
next.js 1
nginx 2
node 5
nodejs 3
npm 3
nuxt.js 1
nuxtjs 1
pm2 1
postgres 1
postgresql 1
rabbitmq 1
react 6
redux 1
regexp 2
typescript 8
vim 3
vue 13
vuejs 1
日语 1
水彩 7

Recent

Archives

Tags

DASH 1
FFMpeg 1
WebGl 9
WebRTC 4
angular 3
antd 1
docker 3
echartsjs 3
ffmpeg 1
flex 1
git 7
go 1
google 1
immutable 1
keep update 1
koa 1
mac 1
mongodb 1
next.js 1
nginx 2
node 5
nodejs 3
npm 3
nuxt.js 1
nuxtjs 1
pm2 1
postgres 1
postgresql 1
rabbitmq 1
react 6
redux 1
regexp 2
typescript 8
vim 3
vue 13
vuejs 1
日语 1
水彩 7
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×