vue中路径别名alias设置

项目中的图片在build之后总会出现各种引用不到的问题，报404，解决方法如下：

webpack中配置别名

...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'img': resolve('static/img'),
      '%': resolve('./static')
    }
  },
...

image.png

CSS loader 会把把非根路径的url解释为相对路径， 加~前缀才会解释成模块路径。
在使用时加上~,告诉加载器它是一个模块，而不是相对路径。例如：

<img src="~img/navbar/空间分析.png" alt="" />

但是在js中使用相对路径时，不需要加~，例如：

<template>
 <img src="~assets/images/logo.jpg" />
</template>
<script>
import 'assets/css/style.css'
</script>
<style>
.logo {
 background: url(~asset/images/bg.jpg)
}
</style>

只有在template中的静态文件地址和style中的静态文件地址需要加~, 在script里的, 别名定义成什么就写什么.

在js数据中如何引用图片

因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。

let imageUrl = require("./img/marker_green.png");

具体请查看vue中图片src路径赋值