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 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 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中的string类型使用说明
2010/07/27 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php使用curl访问https示例分享
2014/01/17 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
python根据出生日期获得年龄的方法
2015/03/31 Python
python实现12306火车票查询器
2017/04/20 Python
python2.7实现邮件发送功能
2018/12/12 Python
PyQt5实现登录页面
2020/05/30 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
自动化专业个人求职信范文
2013/12/30 职场文书
十八大报告观后感
2014/01/28 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
愚人节活动策划方案
2014/03/11 职场文书
六个一活动实施方案
2014/03/21 职场文书
机械机修工岗位职责
2014/08/03 职场文书
先进事迹材料范文
2014/12/29 职场文书
工作年限证明模板
2015/06/15 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python