vue项目打包

最新推荐文章于 2024-02-04 09:38:45 发布
最新推荐文章于 2024-02-04 09:38:45 发布
阅读量2.7k 收藏 23
点赞数 4
分类专栏： 环境配置 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/freeshu/article/details/110440796
版权

1、webpack打包，进入对应项目目录npm run build
在这里插入图片描述
项目根目录下生成了dist文件夹，拖到服务器就行
2、拖到服务器前双击dist下index.html文件，如果报错找不到js、css等资源文件
找到config目录下index.js文件，assetsPublicPath: ‘/’,改为assetsPublicPath: ‘./’,从index.html上一级往下找而不是从/static
在这里插入图片描述
在这里插入图片描述
路径就从根目录进static文件夹下找，不要直接修改index.html
在这里插入图片描述
图片报错404：找到build下utils.js文件，增加一句

publicPath:'../../'

在这里插入图片描述
在这里插入图片描述
注意：页面中用到相对路径资源时候，用./测试图片
在这里插入图片描述
最后重新npm run build就行

freeshu
关注
  • 4
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue打包上线如此简单
梅花寺
10-07 2523
包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
浅谈vue项目打包优化策略
10-17
主要介绍了浅谈vue项目打包优化策略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解vue项目的构建，打包，发布全过程
10-18
小编给大家通过本文详细介绍了关于vue.js项目的构建、打包、发布的全过程，文章很以后价值，值得你参考。
vue如何打包
最新发布
百变鹏仔工作室
02-04 272
此外，还可以直接通过 VS Code 的 NPM 脚本中提供的。在Vue 项目中，可以使用。鹏仔前端 pjxi.com。按钮来完成前端工程打包。
关于JavaWeb中,GET http://localhost:8080/favicon.ico 404 报错解决
f_h_h的博客
09-09 3631
以下演示, 是在eclipse中修改. 修改项目虚拟根路径; 双击服务器 点击Modules 编辑你的Web Modeles 修改path为/ 抓取百度的favicon.ico 将百度的图标保存到webapp目录下 重启你的服务器 现在重新在游览器中输入你的url进入你的项目, 注意已经修改了虚拟根目录, 所以修改你的url也要修改正确. 是不是没有报错了? ...
vue 在线解压压缩包并在线编辑代码保存
m0_49343686的博客
08-01 1232
代码在线编辑保存
Vue中如何进行打包与部署？
stormjun的博客
06-10 1万+
本文介绍了Vue中如何进行打包与部署，包括使用Webpack进行打包、使用Nginx进行部署和使用Docker进行容器化部署。这些方法都是常用的Vue应用程序的打包和部署方法，可以根据实际需要选择合适的方法进行部署。
Vue项目打包编译优化方案
10-14
当一个较复杂的vue项目打包后，文件会非常大，而且访问时资源加载速度很慢，本文介绍了几种措施来优化。
vue项目打包后打开页面空白解决办法
08-27
主要介绍了vue项目打包后打开空白解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目打包之后背景样式丢失的解决方案
10-17
今天小编就为大家分享一篇关于vue项目打包之后背景样式丢失的解决方案，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
08-27
主要介绍了vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀的相关知识，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
Vue项目打包部署
qq_40259528的博客
07-20 2万+
vue项目部署，使用的是linux centors nginx.遇见的问题及解决方案
vue 打包的方式
热门推荐
weixin_60208344的博客
01-01 4万+
我是一个苦b的程序员，今晚加班到快通宵了，困得快睁不开眼了，女上司很关心，问我要不要吃宵夜。我没好气地说，宵夜就算了，能让我睡一觉就行了。女上司红着脸说了句讨厌啊，然后坐在我身边不动，好像距离我很近，搞得我很紧张，难道她发现我的程序出了bug？ 今天分享的是vue项目中的打包方式： 一、使用vue-cli脚手架生成的项目 二、使用webpack 那么就让我们步入正题 第一种： vue create app生成项目的目录： 我们可以看到使用脚手架生成的项目是没有config文...
【打包vue前端项目】
m0_45991266的博客
06-29 1万+
实例项目是使用vue3+vite。对于vue项目进行打包,npm run build
Vue项目如何打包
Z_B_L的博客
12-23 1486
需要注意的是，打包后的文件可能会比开发环境中的文件大很多，因为打包过程会将所有的依赖文件合并并进行压缩。在打包之前，你可以通过优化代码、按需加载等方式来减小打包后的文件大小，提高应用的加载速度和性能。你可以将这些文件上传到服务器的公共目录中，或者使用托管平台提供的部署功能。通过以上步骤，你就可以成功地将Vue项目打包成静态文件，并进行部署。3. 打包完成后，你会在项目根目录下生成一个名为dist的文件夹。这个命令会执行Vue CLI提供的打包脚本，将你的Vue项目打包成静态文件。
Vue基础知识总结 9：vue webpack打包原理
学Java，找哪吒
10-06 2万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 一、前端模块化 webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。 并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。 二、打
手把手教你如何把vue项目打包后部署到服务器（小白教程）
Orange71234的博客
06-21 1万+
（5）输入用户名密码登录出现如下页面 ，点击左侧网站-->添加站点-->输入域名-->根目录地址会 自动生成-->点击提交-->站点创建成功。1.vscode打开你的vue项目-- >点终端 -- >输入npm run build 按回车进行打包；3.下载安装好软件后双击打开，选择SSH连接，填写如下信息，最后点击确定。（7）点击上传，按照下图方式上传之前打包好的dist文件夹下的内容，(2)查看服务器是否安装宝塔，如安装则出现宝塔面板命令，(3)输入14，查看并复制外网面板地址以及用户名，密码。
怎么打包vue项目？
weixin_35750953的博客
01-08 1006
为了打包 Vue 项目，首先你需要在你的 Vue 项目根目录中安装打包工具。你可以使用 npm 或 yarn 来安装： npm install -g@vue/cli # OR yarn global add @vue/cli 然后，在你的 Vue 项目根目录中，运行以下命令： vue-cli-service build 这将使用项目的配置文件中的设置来构建生产版本的应用程序。打包后的文件将被放...
vue项目打包 webpack
05-25
Vue.js 是一个前端框架，它使用 Webpack 作为默认的构建工具，可以将你的项目打包成一个发布的文件。 以下是打包 Vue 项目的基本步骤： 1. 安装依赖 使用 npm 或者 yarn 安装项目依赖，包括 Vue.js 和 webpack ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值