vue-cli4设置打包相对路径
昨天把导航稍微写了一下,今天想要上传到github上,使用github的服务器来看看我的静态页面长什么样子,然而在因为我的部署不在根目录,所以打包的路径有问题,在网上找了很多方法尝试,解决办法如下,此方法不管部署在哪里都可以:修改配置vue.config.jsmodule.exports = {publicPath: process.env.NODE_ENV === 'production' ?
·
昨天把导航稍微写了一下,今天想要上传到github上,使用github的服务器来看看我的静态页面长什么样子,然而在因为我的部署不在根目录,所以打包的路径有问题,在网上找了很多方法尝试,解决办法如下,此方法不管部署在哪里都可以:
- 修改配置vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '././' : '/',
}
这样在打包时资源引用路径就是相对路径,而开发过程中是绝对路径
- 但是这样修改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");
就没有问题啦~
更多推荐
已为社区贡献2条内容
所有评论(0)