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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 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+mysql留言本源码
2009/11/11 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python3实现转换Image图片格式
2018/06/21 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
环境建设实施方案
2014/03/14 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
社区护士演讲稿
2014/08/27 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
MySQL基础(一)
2021/04/05 MySQL
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
实现一个简单得数据响应系统
2021/11/11 Javascript
使用CSS实现音波加载效果
2023/05/07 HTML / CSS