Vue-cli assets SubDirectory及PublicPath区别详解


Posted in Javascript onAugust 18, 2020

近期在参与用vue+ springBoot前后端不分离项目,遇到了前端打包后dist文件放到后台无法运行报404错误,static下的资源都访问不了问题。

问题1:我们知道前后端不分离项目,一些静态图片、页面直接放在resource/static下,由于前后台分开开发,前端进行了跨域处理,dist文件放到后台就相当于本地静态资源,所以不需要跨域处理,可以将引入跨域的路径baseURL置空

const service = axios.create({
    //baseURL: '/appstore',
    baseURL: '',
    responseType: 'json',
    timeout: 5000 // request timeout
  })

问题2:就是assetsPublicPath的问题,先去分析下assetsPublicPath和assetsSubDirectory 。

找到config/index.js文件下的build配置改为 assetsPublicPath: '/dist/'

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  // assetsPublicPath: '/',  assetsPublicPath: '/dist/',
}
  • index:模板
  • assetsRoot:打包后文件存放的路径
  • assetsSubDirctory:除了index.html之外的静态资源要存放的路径
  • assetsPublicPath: 代表打包后,index.html里面引用资源的相对地址

这样配置下就ok了

后台访问时要加上assetsPublicPath地址dist,即http://localhost:8080/dist/index.html#

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
浅析Vue 生命周期
Jun 21 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 #Javascript
JavaScript中交换值的10种方法总结
Aug 18 #Javascript
js+css3实现炫酷时钟
Aug 18 #Javascript
纯js+css实现在线时钟
Aug 18 #Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 #Javascript
js+css实现扇形导航效果
Aug 18 #Javascript
js实现3D旋转效果
Aug 18 #Javascript
You might like
php内核解析:PHP中的哈希表
2014/01/30 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
使用python爬取B站千万级数据
2018/06/08 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
python仿抖音表白神器
2019/04/08 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
党员活动日总结
2014/05/05 职场文书
会计专业自荐信
2014/06/03 职场文书
导航工程专业自荐信
2014/09/02 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
死亡诗社观后感
2015/06/05 职场文书