vue 打包html静态页面,Vue.js打包部署到服务器路径资源和页面404

默认根目录路径

在我们开发完vue项目后进行代码执行npm run build命令后，默认index文件引用静态资源路径是在/static下的，如下图：

更改根目录路径

找到build/config/index.js文件，如下图设置，重新打包即可让你达到你想要的

重新编译后结果

感觉上面方式有点蠢

有没有觉得有点蠢，这还得我们去改变cli的webpack配置，下面我们换个方式，其实在路由中我们有个属性叫base，这个东西可以扩展我们的路由地址，如下

访问对应路由页面404

出现由于路由的history模式下刷新当前路由出现404的问题，因为当刷新当前页面时候，所需要访问的资源在服务器上找不到，也就是说，我们在VueJs开发应用的过程中，设置路由的路径不是真实存在的路径，并且使用了history模式。解决办法，需要后端进行配合,参考

css的type被拦截转换为"text/plain"

服务器端返回的类型是"text/plain"，这个自然也需要后端去解决

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

分享到：

打赏

谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

vue 打包html静态页面,Vue.js打包部署到服务器路径资源和页面404相关推荐

打包微服务前后端分离项目并部署到服务器 --- 分布式 Spring Cloud + 页面渲染 Nuxt.js
前言 Spring Cloud项目属于微服务项目,也就是含有多个Sping Boot模块集合而成的项目 Nuxt.js项目属于前端基于Vue的服务端渲染项目最近在服务器部署上线了一个基于Spring ...
Vue.js - 解决部署到服务器后Element UI图标不显示问题（404错误）
1,问题描述 (1)element-ui 自带了一套常用的图标集合,使用起来十分方便.最近发现当 Vue.js 项目中使用 element-ui 图标时,如果使用 npm run dev 方式启动,图 ...
2019.1.31日【小程序前端页面剩下JS了，基本的数据传导和页面跳转没问题了】
index.wxml <view class='root'><view class='tabs'><view class='item active'><tex ...
怎样将nest.js项目部署到服务器上
记录一下捣鼓许久的华为服务器上部署nest项目需要安装的软件和环境配置 1.服务器连接可以使用PuTTy. 2.文件传输使用FlashFXP 3.服务器上需要安装yum.nodejs(可最新版本) ...
js脚本替换拼接图片路径
#js脚本,拼接图片路径 ##替换拼接页面中图片路径: -$(function () { $('img').each(function () { var imgpath = $(this).attr( ...
vue 打包html静态页面,vue项目打包、vue项目打包后空白界面解决办法
Vue脚手架提供了一个命令npm run build进行打包项目,在package.json中有一个build属性,对应执行命令node build/build.js.执行成功后,项目目录下多了一个d ...
解决vue打包后静态资源路径错误的问题
vue项目完成的最后一步就是打包部署上线,但是打包部署的过程往往不是那么一帆风顺的,现将遇到问题和解决方案记录如下. 图片路径问题起因: 页面中引入资源的方式往往有如下几种 * HTML标签中直接引 ...
Vue.js-Day09【项目实战(附带完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
vue打包路径.html问题,如何解决vue.js打包报错问题
该方法适用于所有品牌的电脑. vue.js打包之后遇到的坑最近在用webpack+vue写项目,经过几天的熬夜加班改BUG,终于把基本的框架给写完了,后面只要加一些小功能就可以了,太好吧!先来npm ...

vue 打包html静态页面,Vue.js打包部署到服务器路径资源和页面404

vue 打包html静态页面,Vue.js打包部署到服务器路径资源和页面404相关推荐

最新文章

热门文章