呢呢 Blog 呢呢 Blog
首页
  • 前端

    • web Worker使用笔记
  • 博客搭建

    • 快速上手
文集
  • 前端公用方法
关于
  • 网站
  • 资源
  • Vue资源
  • 友情链接
GitHub
首页
  • 前端

    • web Worker使用笔记
  • 博客搭建

    • 快速上手
文集
  • 前端公用方法
关于
  • 网站
  • 资源
  • Vue资源
  • 友情链接
GitHub
  • 前端

    • vscode插件同步
    • markdown语法
    • webpack笔记
    • web Worker使用笔记
    • vue-cli4设置打包相对路径
    • vue-cli4配置scss全局变量
    • TOAST UI Editor 使用方法
  • 博客搭建

  • 微前端

  • Cesium天地图

  • bug记录

  • vuepress

  • 浏览器架构及原理

  • photoshop

  • vue3+vite

  • react

  • 编程
  • 前端
Ostask
2021-01-29

vue-cli4设置打包相对路径

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

  1. 修改配置vue.config.js
  module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '././' : '/',
  }
1
2
3

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

  1. 但是这样修改public文件夹下的资源引用会有问题,所以继续改配置
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '././' : '/',
  outputDir:'dist',
  chainWebpack: (config) => {
    config.resolve.alias
      .set('img', resolve('public/img'))
  }
}
1
2
3
4
5
6
7
8

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

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

就没有问题啦~

编辑
上次更新: 2021/07/22, 09:07:42
web Worker使用笔记
vue-cli4配置scss全局变量

← web Worker使用笔记 vue-cli4配置scss全局变量→

最近更新
01
react全家桶搭建全家桶模板
10-19
02
react学习到搭建一个全家桶的基础模板
10-09
03
202108自修图
09-24
更多文章>
Theme by Vdoing | Copyright © 2020-2021 Ni Ni | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×