1、首先!!!项目得独立打开!!!!

因为项目如果不从根路径打开,会导致很多插件不可用

2、下载!!Path Autocomplete插件(路径提示)

上图点击【扩展设置】后进入下图

3、!!!! 在settings.json中添加代码!!!!

点击上图的【步骤 2】之后,进入下图的 【settings.json】文件中,添加下列框出的代码、

  //导入文件时是否携带文件的拓展名
    "path-autocomplete.extensionOnImport": true,
    //配置@的路径提示
    "path-autocomplete.pathMappings": {
    "@": "${folder}/src"
  },

以上是下载的插件的基本配置

接下来是取别名的配置

4、!!!在jsconfig.json中进行别名配置!!!(这是js中用)

如果没有jsconfig.json文件,那就自己建一个(!!!名字要一摸一样)

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "exclude": ["node_modules","dist"]
}

 以上情况就基本上成功了,如果@路径还不生效的话 ,看看自己的文件中是否使用了tsconfig.json文件,

如果有的话,需要在tsconfig.json中添加配置  "allowJs": true,

最后就成功啦!!!!!

成果展示:

!!!!!!接下来是在css和html中用别名!!!!!!

一些静态资源,如css和imag最好都放在assets文件中~~~~~

vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~,其实就是要在开头加个 ~

html中用,开头可加~也可不加~

 

css中用,开头要加入~

Logo

前往低代码交流专区

更多推荐