vue-cli4设置打包相对路径

昨天把导航稍微写了一下，今天想要上传到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");

就没有问题啦~

vue-cli4设置打包相对路径相关推荐

【vue开发问题-解决方法】（一）在style中设置background-image时路径问题
[vue开发问题-解决方法](一)在style中设置background-image时路径问题参考文章: (1)[vue开发问题-解决方法](一)在style中设置background-image时 ...
vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .welcome { width: 420px; height: ...
vue修改css打包,vue修改打包文件的路径
最近用vue做一个项目,刚开始没想到后台用的微擎,不能前后端完全独立.而且 index.html 页面放在template文件夹中,而静态的css和js等文件则放在 /addons/business/ ...
vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .all_bg { background: url(../imag ...
运用 Vue CLI4.X 脚手架构建项目实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. 运用 Vue CLI4.X 脚手架构建项目实战前言一.什么是 Vue CL ...
vue项目设置img标签的默认图片
方法一: 首先看看以前(非vue)项目是怎么设置img标签的默认图片: // 设置默认图片 <img src="http://res.spreadwin.com/gmc38PE.jpg ...
vue 前端设置允许跨域_[web]记一次sanic+vue跨域问题
这两天在琢磨用sanic配合vue来写一个网站,果然马上就遇到问题了... Response to preflight request doesn't pass access control chec ...
vue后台管理系统打包上线到node
项目准备 1. 配置 alias 别名使用vue-cli开发项目,最大特色是组件化.组件中频繁引用其他组件或插件.我们可以把一些常用的路径定义成简短的名字.方便开发中使用. //加载path模块 c ...
nuxt静态部署_nuxt静态部署打包相对路径操作
以往在nuxt项目中,打包静态化部署的的文件如下: 路径为绝对路径,当项目的域名为二级域名的时候,就不能打包为这绝对路径了. nuxt不同于vue项目,思索了许久,终于找到了配置的地方: nuxt项目 ...

vue-cli4设置打包相对路径

vue-cli4设置打包相对路径相关推荐

最新文章

热门文章