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中

<img src="../../static/image/img.png"/>

很容易出错...

能定义一个变量比如 imagePath 来指代路径吗？

样式表中也能解析

注意，是开发环境，不是生产环境的路径问题

谢谢

Answer 1

首先

你不应该用相对路径去引用 static 目录下的资源
可以看出你这个项目是 Vue CLI 2.x 脚手架创建出来的项目。这个项目下的 static 目录意图是用于存放某些静态资源，这些资源是不会被 webpack 打包处理的，只是会被单纯的拷贝。但是如果你使用相对路径去引用这些资源，它们就会被 webpack 处理了（minify、uglify、转base64等），这便与原始的目的违背了。

1. 如果你是想这些资源被 webpack 处理，那么你应该将 static 目录下的资源放到 src/assets 目录下，再通过相对路径引用这些资源。
2. 如果你是想这些资源不被 webpack 处理，那么你可以保持现在的目录，不过引用这些资源的时候请用绝对路径，就问题中的例子来说就是 /static/image/img.png（注意要以 / 开头）

回到问题上

可以通过设置 alias 来方便相对路径的引用

// webpack.base.conf.js
resolve: {
    alias: {
      '@': resolve('src'),
      '@img': '@/src/assets/image'
    }
  }

然后在 <template> 中使用

<img src="@img/img.png"/>

在 scss 文件中使用

.icon-test {
    background: url("~@img/img.png");
}

要注意的是，使用 alias 的路径会被 webpack 处理，这就是为什么我把路径改成 src/assets 了；

至于为什么用 ~@ 以及其他相关内容可以参考：
Vue CLI webpack 模板关于静态资源的描述 和一篇针对 Vue CLI 搭建项目路径相关问题的描述

Answer 2

webpack的alias用的上

resolve: {
    alias: {
      '@': resolve('src'),
      'imagePath': '@/src/stactic/image'
    }
  }