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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
用js实现放大镜效果
Oct 28 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学习之字符串比较和查找
2011/04/17 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
jQuery功能函数详解
2015/02/01 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
js性能优化技巧
2015/11/29 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
JavaScript类的继承多种实现方法
2020/05/30 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 爬虫图片简单实现
2017/06/01 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
社会学专业求职信
2014/07/17 职场文书
政风行风建设整改方案
2014/10/27 职场文书
护理医院见习报告
2014/11/03 职场文书
学习党章心得体会2016
2016/01/15 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js