背景
使用vue-cli创建的项目，我将图片保存在了static目录下，开发时没有问题，图片都能显示。但部署到线上时，发现有的图片能显示，有的图片不能显示。检查了一下元素，发现能显示的图片是因为编译的时候转化为了base64格式，而没有转化的（大于预定义的大小）图片由于引用路径不对，无法显示。网上查了很多vue项目中图片引用相关的资料，最后发现症结处在于我将vue部署在了非项目根目录，因此如果使用绝对路径引用static目录下的图片时，会导致路径不对。因此问题就转化为如何在非项目根目录上部署vue项目。
解决方案
变量声明
- 部署后的域名：
http://example.com/ - nginx的项目root：根域名的项目地址，如
/mydir/rootproject - vue网站目录：
/mydir/rootproject/myproject/ - vue网站访问地址：
http://example.com/testH5 - vue网站主页访问地址：
http://example.com/testH5/index.html - 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 + ')'}"
