Vue项目打包步骤（亲测有效）

最新推荐文章于 2024-06-18 23:23:06 发布
置顶 最新推荐文章于 2024-06-18 23:23:06 发布
阅读量1.3k 收藏 8
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44149219/article/details/106025014
版权

Vue项目打包步骤

步骤

  1. 配置你项目目录下的config下的index.js文件中build下的 assetsPublicPath，开发时为：assetsPublicPath: ‘/’,需要打包时，
    改成assetsPublicPath: ‘./’
    在这里插入图片描述
  2. 注释掉main.js中的mode，开发时为：mode:“history”，而打包上线时注释掉此句在这里插入图片描述
  3. 配置build目录下的utils.js,打包时添加如下一句：publicPath:’…/…/’在这里插入图片描述
  4. 注意：如有错误，可以共同讨论，小白一枚！
搬砖的快乐只有我知道
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目打包步骤
从零出发
06-25 31万+
vue项目打包终端运行命令 npm run build打包成功的标志与项目的改变，如下图：点击index.html，通过浏览器运行，出现以下报错，如图：那么应该如下修改呢？具体步骤如下：1、查看package.js文件的scripts命令2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到in...
用Cordova打包Vue项目的方法步骤
10-17
主要介绍了用Cordova打包Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 打包的方式
热门推荐
weixin_60208344的博客
01-01 4万+
我是一个苦b的程序员，今晚加班到快通宵了，困得快睁不开眼了，女上司很关心，问我要不要吃宵夜。我没好气地说，宵夜就算了，能让我睡一觉就行了。女上司红着脸说了句讨厌啊，然后坐在我身边不动，好像距离我很近，搞得我很紧张，难道她发现我的程序出了bug？ 今天分享的是vue项目中的打包方式： 一、使用vue-cli脚手架生成的项目 二、使用webpack 那么就让我们步入正题 第一种： vue create app生成项目的目录： 我们可以看到使用脚手架生成的项目是没有config文...
vue项目如何打包以及如何变成android、ios应用程序
最新发布
2401_84435192的博客
06-18 392
在中，我们就可以写很多webpack配置，常用的有: 配置端口号，配置跨域服务器代理等。我们需要的主要是配置一个打包的目录publicPath,否则打包出来的apk文件，安装在安卓手机上，可能出现白屏，具体配置如下:publicPath: “./”,// 需要配置 否则打包后的apk文件安装在手机可能白屏port: “6868”, // 配置开发服务器的端口号（打包可以无需配置）// 配置跨域代理(也可以使用CROS解决跨域)proxy: {“/ api”: {
Vue项目如何打包
Z_B_L的博客
12-23 3216
需要注意的是，打包后的文件可能会比开发环境中的文件大很多，因为打包过程会将所有的依赖文件合并并进行压缩。在打包之前，你可以通过优化代码、按需加载等方式来减小打包后的文件大小，提高应用的加载速度和性能。你可以将这些文件上传到服务器的公共目录中，或者使用托管平台提供的部署功能。通过以上步骤，你就可以成功地将Vue项目打包成静态文件，并进行部署。3. 打包完成后，你会在项目根目录下生成一个名为dist的文件夹。这个命令会执行Vue CLI提供的打包脚本，将你的Vue项目打包成静态文件。
vue项目打包
前端菜鸡的博客
04-02 1411
首先打开config/index.js，将assetsPublicPath值改为’./’ assetsPublicPath: '/', 这个在你的build的一对花括号里，用来解决JS,CSS路径问题 然后打开“build/utils.js” return ExtractTextPlugin.extract({ use: loaders, publicPath...
vuecli3打包部署 非根目录下 配置vue.config.js publicPath
汇品铺子
01-07 1614
从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath。 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /m...
详解vue项目打包步骤
10-17
本文将详细介绍Vue项目的打包步骤，帮助开发者理解和掌握这个过程。 首先，打包Vue项目的主要目的是将源代码转换为优化过的、适合在实际环境中运行的静态资源。这通常涉及到代码压缩、模块合并、CSS预处理、图片...
Vue项目分环境打包的实现步骤
08-27
Vue项目的分环境打包是开发过程中不可或缺的一环，它允许我们根据不同的部署环境（如开发、测试、预发布和生产）创建针对性的构建。Vue CLI工具虽然默认提供了开发（dev）和生产（prod）两种环境，但往往需要针对更...
Springboot项目与vue项目整合打包的实现方式
08-25
Springboot项目与Vue项目整合打包的实现方式 在现代软件开发中，前端和后端项目的分离开发和集成是非常常见的。在这种情况下，我们需要在开发时将前端和后端项目分离，以便于更好地维护和更新代码。但是，在部署时...
【转】vue项目打包上传的步骤和方法
weixin_34258078的博客
02-14 341
vue项目实现github在线预览功能Vue项目上传github并预览vue项目上传Github预览
详解vue项目的构建，打包，发布全过程
10-18
小编给大家通过本文详细介绍了关于vue.js项目的构建、打包、发布的全过程，文章很以后价值，值得你参考。
vue实现的多页面项目如何优化打包的步骤详解
11-20
遇到的问题 在多页面框架打包的过程中会，随着业务的增加页面越来越多，使用的三方包也会越来越多，但并不是所有页面都会使用到三方插件，使用webpack打包会让所有的三方包打包到一起，会导致vendor.js(三方包打包后的文件)越来越大，即使没使用过三方插件的页面也会引入，页面加载会越来越慢. 如何优化  使用cdn引入，这种就每次新建一个页面的时候手动通过cdn的方式引入，但是并不是特别好的方式，还需要手动加入. 就是使用splitChunks分割三方包，将三方包单独打包出来，根据页面的依赖情况自动注入，但是这种情况分离的三方包并不会自动注入到对应的页面中去,所以就写了个自动注入的插件
【打包vue前端项目】
m0_45991266的博客
06-29 1万+
实例项目是使用vue3+vite。对于vue项目进行打包,npm run build
Idea项目打包、Eclipse项目打包、vue项目打包
ProGram_Java521的博客
10-27 552
1.Idea项目打包 （1）. （2）. 2.Eclipse项目打包 （1）. （2）. 3.vue项目打包 （1）.控制台输入npm run build:prod （2）.复制（要去项目的文件夹里复制）
打包vue项目
daimeijin的博客
08-01 155
前言 最新想开发一个前后端分离的项目，一直想开始的，拖延了好久终于决定要对它下手了。最早的时候开发的时候使用的还是JSP，那个时候使用的还是EL表达式，后来切换到Spring和SpringMVC之后采用的是HTML+JS的all in one的模式，虽然也可以称为前后端分离，但是还是耦合在一个大工程里面。到最近的项目拆分为前后端完全分离的模式。由于公司组织结构调整，前后台完全分离，所以对前端技术有点生疏了。需要及时补救一下。虽然VUE已经是一个很流行的框架了，但是三天不练手生，所以还是决定自己搞一个项目练练
vue项目是怎样打包的
weixin_56329793的博客
08-09 707
前端项目打包命令 打包完成后会生成一个dist文件夹。npm run dev 前端项目运行命令。
Vue打包并发布项目
qq_43842093的博客
05-11 9938
一、 打包vue项目步骤： 1、对当前vue项目进行打包的命令如下： npm run build 2、打包完成，会输出Build complete并且在vue项目中会生成一个名字为dist的打包文件。如下图： 二、 使用静态服务器工具包发布打包的vue项目 1、首先安装全局的serve，如下图： 命令如下：serve + 打包文件名 serve dist 效果图如下： 3、使用浏览器访问上图中输出的地址，效果图如下： 三、 使用动态 web 服务器(tomcat)发布打包的vue项目
Vue项目的创建/打包/发布图文详解
zaq977684的博客
09-22 540
Vue项目的打包与发布图文详解
Vue项目用HBuilder打包成Android App：步骤详解及问题解决
首先，对于基于vue-cli 3.x及以后版本的项目，需要在项目根目录下创建一个`vue.config.js`文件，用于配置Webpack，特别是设置打包的公共路径（publicPath），以避免在安卓手机上安装应用时出现白屏问题。 打包过程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值