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.js
resolve:{
alias:{
'@':resolve('src'),
'@img':'@/src/assets/image'
}
}
然后在