Vue项目路径问题（其实是webpack打包的路径问题），补充【@代替默认路径的配置】

项目遇到url路径问题，网页崩了。

          .list-item {
            background-image: url(~@/assets/images/icons.png);
            width: 61px;
            height: 40px;
            display: block;
          }

 

我们事先编辑的脚本为用@替代src，但是这里可知是在vue组件文件中的css（less）下的代码， 我们只需要在@符号前键入~，即下面下面代码。就可以在css（less）代码下正常使用相对路径引入图片。

 

url(~@/assets/images/icons.png);

 

补充：由于使用node_modules 中的path包，我们可以在项目根目录下的jsconfig.json（没有就新建）， 键入如下代码。可以使用@替代源代码文件src，例如@/assets/images/icon.png

 

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