关于vue框架 npm run build 之后dist包放入express框架中public路径静态资源引入错误问题

最新推荐文章于 2024-06-17 18:04:04 发布
最新推荐文章于 2024-06-17 18:04:04 发布
阅读量796 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： html vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42427109/article/details/83537865

在这里插入图片描述
首先在app.js中 更改默认的公开路径配置

在这里插入图片描述
然后在router路径下的index.js中配置默认访问路径即可
此方案可解决大部分问题,如果还解决不了的话 请加微信 17319132391讨论

【vue】项目打包&部署到tomcat&express部署&无法请求后台接口404&Access-Control-Allow-Origin跨域问题
hanne_lovegood的博客
03-30 8777
cnpm run build 打包到项目文件夹下的dist; vue部署到tomcat 安装express: npm install express -g npm install express-generator -g 配置环境变量 express expressDemo创建项目 npm install下载依赖 把dist目录下的所有文件（static包和index.html）复制到express项目的public文件夹下； npm start 启动项目； 设置页面图标； 404错误 跨域问题 修改端口号
解决Vue打包之后文件路径出错的问题
08-27
下面小编就为大家分享一篇解决Vue打包之后文件路径出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目打包后部署到express服务器
廊坊吴彦祖
12-01 2497
vue项目打包后部署到express服务器 Express是基于Node.js平台，快速，开放，极简的Web开发框架，如果前端需要服务器部署自己的项目，可以使用express 首先在vue项目安装 express npm install express -save 然后根目录下新建app.js文件 const express = require('express') const path = ...
npm run dev 后dist 被情况_npm包 | 我的第一个npm安装包
weixin_39576294的博客
11-22 110
应公司业务要求，需要制作桌面安装程序。同时也要替代QT，制作QT的安装程序。所以最后我选用了electron制作exe，配合Inno Setup Compiler制作安装包。因为这玩意是我一个人在研究，为了避免我哪天休息不在，还找我打包的情况，我特意写了将这个项目制作成为了一个npm安装包，并附上相应文档，相信还是能看懂的。1. 将自己的函数导出src/main.js 是我的主要代码文件。main...
npm run build图片报错
ly1_1520的博客
05-24 425
问题：vue项目npm run build打包报错 原因：图片压缩出错 解决： 关闭360腾讯电脑管家等软件 npm remove image-webpack-loader cnpm install --save-dev image-webpack-loader npm run build
前后端分离 Vue打包的history路由风格index.html与后端的ThinkPHP的index.php都部署在后端框架的public目录下如何转发？
weixin_44107914的博客
12-31 1393
ThinkPHP5.1+Vue history模式路由问题： Vue使用history路由模式，打包以后，将dist目录中的文件放置到public目录中后产生下面问题： 后端要求定位到index.php www.test.com/index/index/index 对于后端，相当于访问www.test.com/index.php/index/index/index 入口文件是index.ph...
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
10-16
1. 在Vue项目中，`npm run build`命令通常在`package.json`的`scripts`部分配置好，运行这个命令会调用webpack来处理`src`目录下的所有文件，并将它们打包到`dist`目录下。这个目录是webpack根据配置文件（通常是`...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
页面空白通常与Vue CLI的版本有关，Vue CLI 2和Vue CLI 3处理打包后的静态资源路径的方式有所差异。对于Vue CLI 2，需要修改config/index.js文件中的assetPublicPath的路径为相对路径“./”。对于Vue CLI 3，则需要...
vue完成项目后,打包成静态文件的方法
10-18
接下来，通过在终端中运行 `npm run build` 命令来打包项目。这将在项目根目录下的 `dist` 目录中生成静态文件，包括 HTML、CSS、JavaScript 和其他资源。这些文件可以直接部署到服务器。 如果你想在本地使用 Node....
NPM引入组件
xueyoubangbang的博客
06-03 1925
前言： 原来前端开发的适配也是如此的杂乱无章，感觉比移动端还扯淡，特别是IE8及以下的。 在安卓开发中，我们需要经常引入第三方组件，那么在前端改怎么引入的？以我们移动端常见的轮播图为例， 首先在gitHub上找到轮播图的组件 https://github.com/amazeui/swiper //git 上的地址 下面是使用说明 使用说明： 获取 Amaze UI S...
本地打开打完包的dist下的文件使用笔记
qq_38388578的博客
05-19 2374
1、anywhere 1-1、安装 npm install -g anywhere 1-2、使用（端口号自定义） anywhere -p 8003 1-3、使用帮助 anywhere --help 2、http-server 2-1、安装 npm install http-server -g 2-2、使用（在项目路径里面执行cmd命令，开启服务器执行http-server --cors -p 8080 -o -c-1。–cors是允许跨域，-p是设置端口，默认是8080，-o是立马打开
vue-cli 打包出来的文件缺少_Vue-cli 项目将打包dist文件丢到服务器上访问出现空白...
weixin_28800247的博客
01-16 1313
我vue-cli 的版本为 4.0.4image.png使用下面的命令将npm run build将打包生成的dist文件夹, 放在服务器中, 浏览器访问, 发现访问成功,但是页面是空白的,可尝试以下解决方法出现这种情况要分两个处理方式(vue-cli2点几的版本和vue-cli3点几的版本)第一种：vue-cli 2点几的版本； 首先找到config/index.js文件，将assetPubl...
vue-cli5升级：打包后运行时缺少对应的public文件夹下css、js等静态文件
qq_44242707的博客
10-28 2004
【代码】vue-cli5升级：打包后运行时缺少对应的public文件夹下css、js等静态文件。修改copy-plugin配置
用vue写一个npm包(package)，发布及引用
weixin_44434938的博客
02-20 3280
用vue写一个npm包(package)，发布及引用
webpack构建vue项目 基础09之生产环境 打包为zip文件 与 public静态文件的copy
weixin_43845137的博客
08-15 766
webpack构建vue项目 基础09之生产环境 打包为zip文件 与 public静态文件的copy
[Vue CLI 3] public 目录没用吗
weixin_33750452的博客
09-16 487
在 vue-cli 3 初始化的项目根目录下面：和 src 同级有一个 public 目录 官网的说明如下：https://cli.vuejs.org/zh/guid... 在下列情况下使用： 你需要在构建输出中指定一个文件的名字。 你有上千个图片，需要动态引用它们的路径。 有些库可能和 webpack 不兼容，这时你除了将其用一个独立...
解决npm无法找到文件的常见问题：This is related to npm not being able to find a file.
热门推荐
cici3450的博客
06-17 1万+
在使用npm进行包管理时，我们可能会遇到npm无法找到文件的错误，这通常与文件路径、权限设置或npm配置有关。本文将探讨这些常见问题的原因，并提供相应的解决方案。
使用umi时，项目运行报错找不到公共库文件
双双浪的博客
07-02 1092
在某次运行项目中，报出以下错误，项目无法找到公共引用的库，初次接触lerna，导致搞了相当长一段时间才解决， 解决步骤： lerna link 运行上面命令后查看package列表 lerna list 再次运行npm run start成功运行项目。 lerna 相关命令补充记录 –hoist 这个选项，会把共同依赖的库安装到根目录的node_modules下， 统一版本 lerna bootstrap 安装依赖 lerna clean 删除各个包下的node_modules lerna ini
vue打包放到服务器的问题
shaonian1996
06-26 1416
1 打包后放到服务器无法加载资源文件 一般的话vue打包后放到public目录下 修改前端代码：config/index.js ,assetsPublicPath改成 : './' build: { index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: pat...
将前端的代码打包npm run build后将dist中的文件复制到后端的public文件夹中，页面正常运行到localhost:3000端口后能够正常渲染页面并进入，但是页面刷新后从开发者模式的网络中看到，页面不走前端打包后的dist中的文件（没了），丢失了页面，没有内容
最新发布
06-07
针对 `npm run build` 打包后刷新页面出现 404 的问题（资源路径错误或未加载），结合后端 public 文件夹和路由 fallback 配置，建议按以下步骤解决： --- #### 一、核心配置修改 1. **修改 Vue 打包路径** 在 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值