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的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
vue无限轮播插件代码实例
May 10 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
JS代码编译器Monaco使用方法
Jun 11 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版自动生成文章摘要
2008/07/23 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
利用Python如何生成便签图片详解
2018/07/09 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python二维码生成识别实例详解
2019/07/16 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
生产管理的三大手法
2013/11/11 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
护士个人自我鉴定
2014/03/24 职场文书