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 相关文章推荐
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
javascript实现倒计时提示框
Mar 02 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中防止SQL注入最好的方法是什么
2013/06/10 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
详解如何运行vue项目
2019/04/15 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
Python 多线程抓取图片效率对比
2016/02/27 Python
python3调用R的示例代码
2018/02/23 Python
python 项目目录结构设置
2020/02/14 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
python游戏开发的五个案例分享
2020/03/09 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
python os.listdir()乱码解决方案
2021/01/31 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
个人充满哲理的自我评价
2014/02/20 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
教学质量月活动总结
2015/05/11 职场文书
2016元旦主持人开场白
2015/12/03 职场文书