背景

使用vue-cli创建的项目，我将图片保存在了static目录下，开发时没有问题，图片都能显示。但部署到线上时，发现有的图片能显示，有的图片不能显示。检查了一下元素，发现能显示的图片是因为编译的时候转化为了base64格式，而没有转化的（大于预定义的大小）图片由于引用路径不对，无法显示。网上查了很多vue项目中图片引用相关的资料，最后发现症结处在于我将vue部署在了非项目根目录，因此如果使用绝对路径引用static目录下的图片时，会导致路径不对。因此问题就转化为如何在非项目根目录上部署vue项目。

解决方案

变量声明

1. 部署后的域名：http://example.com/
2. nginx的项目root：根域名的项目地址，如 /mydir/rootproject
3. vue网站目录：/mydir/rootproject/myproject/
4. vue网站访问地址： http://example.com/testH5
5. vue网站主页访问地址： http://example.com/testH5/index.html
6. vue网站静态文件目录： http://example.com/myproject/static

解决步骤

step1: 修改打包后静态资源的路径

这里我们需要改成绝对路径。

build: {
    ...
    assetsSubDirectory: 'static',
    assetsPublicPath: '/myproject/'  // 未修改前的配置为 '/'，
}

这样静态文件目录就始终在http://example.com/myproject/static/这个路径了。

step2：修改路由文件

的history模式下，所有的路由都是基于根路径的，如/xxxx，现在我们时部署到/testH5下，我们就要基于这个来修改路由。
vue-router有一个base属性 https://router.vuejs.org/zh/…

base
类型: string
默认值: "/"
应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"

修改路由代码

const router = new Router({
  mode: 'history',
  base: '/testH5', // 这是新加的配置
  ...
})

这样打包部署时就可以了，但是开发环境下这个就不对了，所以我们还要根据环境修改一下文件。
config/prod.env.js生产环境变量

module.exports = {
  NODE_ENV: '"production"',
  ROUTER_BASE: '"/testH5"'
}

config/dev.env.js开发环境变量

module.exports = {
  NODE_ENV: '"development"',
  ROUTER_BASE: '"/"'
}

路由代码

const router = new Router({
  mode: 'history',
  base: process.env.ROUTER_BASE, // 这是新加的配置
  ...
})

至此，打包配置的相关修改已全部完成，项目也能够正常访问。

step3: 修改nginx配置

location ~ /testH5 {
    try_files $uri $uri/ /myproject/index.html;
}

/testH5就是部署的网站目录。

step4: 修改图片打包的路径

step5: 引用图片路径使用相对路径

图片主要分为五种引用方式（均针对引用本地图片，在线图片直接写具体的url地址，不存在路径问题）：
（a） 使用img
 1. 静态img，<img src="../../static/xxx" />在img标签中通过src直接写静态图片的路径
 2. 动态img，<img :src="require('../../static/xxx')" />在img标签中v-bind:src（简写为:src）写图片路径，由于动态图片不会在编译时解析路径，因此需要使用require的方式引用
（b）在css样式中直接使用背景图
 3. 使用静态背景图的时候，图片资源是通过css加载的，如background: url("../../static/xxx.png")，打包后变成了url("static/xxx.png")，因此要修改build文件夹下的utils.js代码

if (options.extract) {
 return ExtractTextPlugin.extract({
   use:loaders,
   fallback: 'vue-style-loader',
   **publicPath: '../../',  ** // 新添加
 })
}

  4. 使用动态背景图时（如通过条件判断，active时用imgA，否则用img）
    `<div class="bg" />`在.bg样式的background属性中使用 
    `url("require('../../static/xxx')")`的方式动态引入静态图片

（c）通过vue的data加载图片再使用
 5. 在vue的data里用require引用图片 image_bg: require('../../static/xxx.png')
使用：:style="{backgroundImage: 'url('+ image_bg + ')'}"