vuecli3 build之后静态文件出现404
时间:2022-07-26
本文章向大家介绍vuecli3 build之后静态文件出现404,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天打包vue-cli3时,扔到服务器上面发现所有的资源都请求失败了,然后去根目录找配置文件,发现没有vue.config这个文件,只有一个babel.config.js这个文件,于是自己创建了一个vue.config文件如下:
module.exports = {
// 基本路径
publicPath:"./", // 可以设置成相对路径,这样所有的资源都会被链接为相对路径,打出来的包可以被部署在任意路径
outputDir:"dist", //打包时生成的生产环境构建文件的目录
assetsDir: 'public', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
/*devServer: {
proxy: 'http://localhost:8080'
}*/
}
然后再次打包,发现请求静态资源访问成功了。
1. 首先放一张项目的目录:
- public文件夹 存放 index.html以及一些json文件。
- src -> assets 文件夹下存放一些需要的图片。
- src -> components 文件夹下存放每个模块的组件。
- src 目录下是App.vue、main.js、router.js、store.js文件。
2. 在执行 npm run build 后,项目多了一个dist文件夹。
对比打包前,可以看到文件相应的存放位置。
3.此时打开dist里的index.html文件,显示的是空页面。查看报错:
- Refused to apply style from ‘http://localhost:63342/css/app.c72333b2.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
- Failed to load resource: the server responded with a status of 404 (Not Found)
4. 现在去官网查一下文档。
解决方法如下:
4.1 在根目录下创建一个 vue.config.js 文件,修改配置。
- module.exports = {
- // 选项…
- }
4.2 注意:从 Vue CLI 3.3 起已弃用baseURL,请使用publicPath
。
4.3 参考配置:
- module.exports = {
- // 基本路径
- publicPath:“./”, // 可以设置成相对路径,这样所有的资源都会被链接为相对路径,打出来的包可以被部署在任意路径
- outputDir:“dist”, //打包时生成的生产环境构建文件的目录
- assetsDir: ‘public’, // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
- /*devServer: {
- proxy: ‘http://localhost:8080’
- }*/
- }
4.4 运行 npm run build 后生成的dist文件夹:
此时 打开 index.html 可以正常显示。
PS:在项目中,一些模块还用axios请求了本地的json文件。经过上面的配置后,只有json数据无法请求,一直报404。
后来经检查发现,请求的时候,请求路径为相对路径
axios.get('/newsList.json')
换成绝对路径后就可以请求成功了。
axios.get('newsList.json')
文章出自:https://blog.csdn.net/weixin_40141473/article/details/99671109
- [快学Python3]基础知识
- [快学Python3]开发工具
- [快学Python3]解析器
- [快学Python3]函数
- [快学Python3]循环控制
- [linux][kprobe]谁动了我的文件---使用kprobe找到目标进程
- [快学Python3]if条件控制
- codeforces 767A Snacktower(模拟)
- [快学Python3]Sets(集合)
- [nptl][rwlock]pthread rwlock原理分析
- [快学Python3]Dictionary(字典)
- [快学Python3]List(列表)
- [快学Python3]Tuple(元组)
- HDU 1248 寒冰王座(完全背包裸题)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 你知道怎么查看 IP 地址吗?
- spring cloud微服务之间的调用
- 华为网络整体解决方案 | 整体布局思想一定要有!
- java使用influxDB时序数据库
- 网络工程师必看 | 从动态图看VLAN技术,建议收藏!
- 【原创】Java并发编程系列35 | ScheduledThreadPoolExecutor定时器
- 『极限版』不掺水,用纯 CSS 来实现超飒的表单验证功能
- 从0到1开发测试平台(十三)前后端接口token验证
- 如何使用PYTHON抓取新闻文章
- Open3d 学习计划—13(Azure Kinect)
- 头条面试题:计算目录树的深度
- /etc/passwd文件和/etc/shadow文件
- docker_进阶
- [前端] 设定为disabled的表单域值不能被提交
- 工厂方法模式