vue填坑之webpack run build 静态资源找不到的解决方法


Posted in Javascript onSeptember 03, 2018

vue cli搭建的项目,在本地测试调试都OK,运行npm run dev之后运行正常,今天放到服务器上跑,结果RD说找不到打包后的静态资源,浏览器控制台错误代码404

问了RD,因为服务器上线方式的调整,不会指定具体项目路径因此,https://bigdata.yiche.com/static/css/app.149f36018149fcbe537f02cafdc6f047.css 这个文件找不到,看看我们正常打包好的目录:

vue填坑之webpack run build 静态资源找不到的解决方法

正确的访问路径是:https://bigdata.yiche.com/deploy/static/css/app.149f36018149fcbe537f02cafdc6f047

config/index.js配置如图:

vue填坑之webpack run build 静态资源找不到的解决方法

思来想去之前打包好的文件直接扔到nginx就可以使用,实在不清楚原因。于是找到我们的美女组长姐姐来帮忙,分分钟改了config/index.js下的几行代码,如图:

vue填坑之webpack run build 静态资源找不到的解决方法

这里需要注意assetsPublicPath:'/deploy/' 末尾的斜杠一定要加,不然部分js打包后会出现https://bigdata.yiche.com/deploystatic/css/app.149f36018149fcbe537f02cafdc6f047这样的情况。

看下打包好的目录,对比之后会发现多了一层deploy目录,这个多出来的路径是index和assetsRoot这两个设置决定的

vue填坑之webpack run build 静态资源找不到的解决方法

而assetsPublicPath则是确定打包后的文件引用路径:看看打包后的index.html文件的js和css资源的引用路径:

vue填坑之webpack run build 静态资源找不到的解决方法

对比之前默认配置的路径:

vue填坑之webpack run build 静态资源找不到的解决方法

好了再放到服务器上,问题解决了。

问题总结:

原因是服务器没有指定项目目录,因此需要在打包时对打包文件添加访问的项目名称,所以在配置打包路径是要加上项目名称,下面是vue cli默认webpack config/index.js的配置解释

var path = require('path')

module.exports = {
 build: { // production 环境
 env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
 index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件
 assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径
 assetsSubDirectory: 'static', // 编译输出的二级目录
 assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
 productionSourceMap: true, // 是否开启 cssSourceMap
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false, // 是否开启 gzip
 productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名
 },
 dev: { // dev 环境
 env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境
 port: 8080, // 运行测试页面的端口
 assetsSubDirectory: 'static', // 编译输出的二级目录
 assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
 proxyTable: {}, // 需要 proxyTable 代理的接口(可跨域)
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false // 是否开启 cssSourceMap
 }
}

本人个人理解,如有不对欢迎指出!

以上这篇vue填坑之webpack run build 静态资源找不到的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
JavaScript与函数式编程解释
Apr 27 Javascript
JS option location 页面跳转实现代码
Dec 27 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
webpack4 处理CSS的方法示例
Sep 03 #Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 #Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 #Javascript
webpack4 处理SCSS的方法示例
Sep 03 #Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 #Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 #Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 #Javascript
You might like
PHP的几个常用数字判断函数代码
2012/04/24 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
2019/08/16 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
深入了解Python 方法之类方法 & 静态方法
2020/08/17 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
工厂实习感言
2014/01/14 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
教师简历自我评价
2014/02/03 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
行风评议整改报告
2014/11/06 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
Python实现双向链表基本操作
2022/05/25 Python