vue项目路径配置_vue 路径配置

在项目根目录创建jsconfig.json文件，将下面代码添加进去

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

同时在vue.config.js中添加以下代码：

configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },

即可用@指代src目录。

css中不生效解决办法：

img标签：

<img :src="require('assets/img/header/search.png')">

背景图：

<button  :style="{backgroundImage: 'url(' + require('@/assets/serch_icon.png') + ')'}"></button>