vue 开发环境下怎样定义样式的路径？

Question

比如我的项目结构├──build...├──src│  ├──style│  │  ├──scss│  │  │  └──index.scss│  │  └──style.scss...│  ├──page│  │  └──index.vue...├──static│  ├──css│  ├──font│  ├──image│  └──js
在index.scss中引用路径时用的相对路径
../../../static/image/img.png
在index.vue中
很容易出错...
能定义一个变量比如imagePath来指代路径吗？
样式表中也能解析
注意，是开发环境，不是生产环境的路径问题
谢谢

Answer 1

首先你不应该用相对路径去引用static目录下的资源可以看出你这个项目是VueCLI2.x脚手架创建出来的项目。这个项目下的static目录意图是用于存放某些静态资源，这些资源是不会被webpack打包处理的，只是会被单纯的拷贝。但是如果你使用相对路径去引用这些资源，它们就会被webpack处理了（minify、uglify、转base64等），这便与原始的目的违背了。如果你是想这些资源被webpack处理，那么你应该将static目录下的资源放到src/assets目录下，再通过相对路径引用这些资源。如果你是想这些资源不被webpack处理，那么你可以保持现在的目录，不过引用这些资源的时候请用绝对路径，就问题中的例子来说就是/static/image/img.png（注意要以/开头）回到问题上可以通过设置alias来方便相对路径的引用//webpack.base.conf.jsresolve:{alias:{'@':resolve('src'),'@img':'@/src/assets/image'}}然后在中使用在scss文件中使用.icon-test{background:url("~@img/img.png");}要注意的是，使用alias的路径会被webpack处理，这就是为什么我把路径改成src/assets了；至于为什么用~@以及其他相关内容可以参考：VueCLIwebpack模板关于静态资源的描述和一篇针对VueCLI搭建项目路径相关问题的描述

Answer 2

webpack的alias用的上resolve:{alias:{'@':resolve('src'),'imagePath':'@/src/stactic/image'}}