vue-cli3+ 打包部署到服务器后，svg在iphone上无法正常显示 -- 工作笔记

用vue-cli3初始化项目配置完，然后打包部署到服务器上，svg图片在iPhone不能正常显示（.png格式可以显示），在安卓可以正常显示。
下面是我的做法（iphone不正常显示的做法）
我是用img标签引入

<div class="CPRdiv" @click="mapLink('CPR')">
    <img  class="CPR"
    src="@/assets/images/CoastalPlankRoad.svg" type="image/svg+xml">
  </div>

把svg图片放在assets/images里面

在这之前在vue.config.js需要配置下引入svg的，不然会报错
在 chainWebpack

let path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  lintOnSave: true,
  runtimeCompiler: true, // 

  // 调整内部的 webpack 配置。
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
  chainWebpack: config => {
    config.resolve.alias.set('@', resolve('src'))
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, { }))
  },
  configureWebpack: () => {},
  // 配置 webpack-dev-server 行为。
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    proxy: {
      '/': {
        // target: 'http://www.xxxxxx.com/',
        target: 'http://192.168.0.0:8000/', // 自己的ip地址
        changeOrigin: true,
        ws: false,
        pathRewrite: {
          '^/': ''
        }
      }
    }
  }

}

解决方法:
更改引入svg的方式，改为background的方式
如下

<div
      class="NCPdiv"
      @click="mapLink('NCP')"
      :class="{active :NcpIsActive}"

css
.NCPdiv {
    position: absolute;
    width: 95px;
    height: 42px;
    left: 260px;
    top: 146px;
    background:url('[e-mail]/assets/images/NuwaCoastalPark.svg');
    background-size: cover;
    }

然后重新打包后部署到服务器上就可以正常显示了。

在这里具体的原理我也不懂，属于误打误撞，记录一下。

这里顺便也记一下，配置移动端适配。
创建postcss.config.js

module.exports = {
  'plugins': {
    'postcss-import': {},
    'postcss-url': {},
    'postcss-aspect-ratio-mini': {},
    'postcss-write-svg': {
      utf8: false
    },
    'postcss-cssnext': {},
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 根据ui给的设计图配置
      viewportHeight: 603, // (Number) The height of the viewport.
      unitPrecision: 2, // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: 'vw', // (String) Expected units.
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false // (Boolean) Allow px to be converted in media queries.
    },
    'postcss-viewport-units': {},
    'cssnano': {
      preset: 'advanced',
      autoprefixer: false,
      'postcss-zindex': false
    }
  }
}

噢，还需要安装依赖包，不知道是哪几个了