vue-cli4设置打包相对路径

昨天把导航稍微写了一下，今天想要上传到github上，使用github的服务器来看看我的静态页面长什么样子，然而在因为我的部署不在根目录，所以打包的路径有问题，在网上找了很多方法尝试，解决办法如下，此方法不管部署在哪里都可以：

1. 修改配置vue.config.js

module.exports = {
 publicPath: process.env.NODE_ENV === 'production' ? '././' : '/',
 }

这样在打包时资源引用路径就是相对路径，而开发过程中是绝对路径

2. 但是这样修改public文件夹下的资源引用会有问题，所以继续改配置

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '././' : '/',
  outputDir:'dist',
	  chainWebpack: (config) => {
	    config.resolve.alias
	      .set('img', resolve('public/img'))
	  }
  }

然后在页面中这样使用图片

background-image:url("~img/user.jpg");

就没有问题啦~