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 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
jquery 上下滚动广告
Jun 17 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
原生JavaScript实现刮刮乐
Sep 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 session处理的定制
2009/03/16 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
express 项目分层实践详解
2018/12/10 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python爬虫如何解决图片验证码
2021/02/14 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
暖通工程师岗位职责
2014/06/12 职场文书
中国梦团日活动总结
2014/07/07 职场文书
领导干部保密承诺书
2014/08/30 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang