vue 打包静态资源

最新推荐文章于 2024-05-14 15:01:17 发布
最新推荐文章于 2024-05-14 15:01:17 发布
阅读量764 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yz18931904/article/details/84838263
版权

vue完成项目后，如何打包成静态文件，并且用Node调试

打包

1、修改config里面的index.js里面的productionSourceMap为false,默认情况是true（true代表打包环境是开发环境，可以进行调试；false表示生产环境，正式上线的）

2.在cmd里面运行npm run build,(运行的是build里面的build.js文件)

生成的包放在dist下面

 

金箍一梦何来愁
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue完成项目后,打包成静态文件的方法
10-18
今天小编就为大家分享一篇vue完成项目后,打包成静态文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下...
vue之项目静态资源打包
HZKang的博客
09-27 596
如果使用的是vue-cli构建的项目，打包看效果只需要用cmd进入项目里npm run build即可，打包完在根目录下的dist目录下可以看到文件，直接打开dist目录下的index.html就能查看页面。 然而你悲剧的发现下面报了好几个错误，都是加载资源路径出了问题，嘿嘿解决方法如下： 打开根目录下config文件夹里的index.js文件,将build对象下的assetsPublicPat
webpack处理静态资源-模板文件： vue
最新发布
qq_36413371的博客
05-14 220
webpack 本身不能直接处理 .vue 文件，但是可以通过一些loader来处理安装必要的依赖vue-loader、vue-template-compiler（用于编译模板）以及 css-loader（用于处理样式）
vue中的静态资源打包
weixin_43919497的博客
05-03 1113
打包命令，执行打包命令成功后会有生成一个dist目录。 npm run build 在开发环境下，要想使用静态资源，应该在打包静态资源后将静态资源放入dist文件下然后通过dist文件夹取即可。
vue项目打包时如何将静态文件打包到一个单独的文件夹
phplife的电子商务网上商城专栏
09-17 2820
vue项目打包时如何将静态文件打包到一个单独的文件夹
全栈开发实战｜Vue进阶——使用静态模块打包工具webpack
不断学习，不断进步，提高自己
06-24 1204
简单介绍目前热门的JavaScript应用程序的静态模块打包工具webpack。
解决vue打包之后静态资源图片失效的问题
08-28
解决 Vue 打包之后静态资源图片失效的问题 在 Vue 项目中， 经常会遇到一个问题，即在打包之后静态资源图片失效的问题。这种问题可能会导致图片无法显示，控制台中提示某个图片没有找到（404 错误）。这种问题的...
详解vue静态资源打包中的坑与解决方案
08-28
Vue 静态资源打包中的坑与解决方案 本篇文章主要介绍了 Vue 静态资源打包中的坑与解决方案，主要解决路径问题。下面是详细的知识点： 一、 Vue-cli 默认配置打包后部署至特定路径下静态资源路径错误问题 * 问题...
vue项目静态资源打包方法
qq_42095437的博客
08-12 3546
如何用.npm run build打包静态资源 1.打开build文件夹下的webpack.base.conf.js，如下图，将红圈地方改为红箭头所指的一行代码 2.打开config文件夹下index.js如下图，将蓝箭头所指改为红箭头所指 3.打开build文件夹下的utils.js如下图，将圈出的代码添加进去 4.保存然后运行npm run build 进行打包在项目文件夹...
vue项目打包时将静态文件打包到一个文件夹下的处理
lucky_Mather的博客
06-16 1334
vue文件打包
Vue打包项目图片等静态资源的处理
lyxkgc的博客
01-03 4518
项目打包，默认是打包在根目录下面的。当然我们可以通过设置，打包到任意子目录中去。 但是，当项目中引入资源的，比如：引入图片资源、js资源、或者字体图标之类的。那么可能在这个中间又会踩坑。 1、在vue文件引入图片 例如，我们将一张图片放到资源目录 /static/image/lyf.jpg 我们在 vue 文件中用下面的代码来使用这张图片。 <img src="static/image/lyf.jpg" alt=""> 注意，最前面不要加 / ，如果是这样操作的话，会变成相对根目录调用图片。如
Vue 如何打包纯前端静态资源项目
Chieffo 的博客
03-15 1035
背景 在企数保项目开发前期，由于项目紧急，需要先做一个独立于后端的纯前端演示项目，即不依赖于后端打包纯前端静态资源。现有的项目代码和打包配置，需要基于以上需求进行修改，本文章是对修改过程中遇到的问题进行记录和总结。 解决方案 修改 VueRouter 的路由模式为默认的 hash 模式 修改 src/router/index.js 文件，把 mode: 'history' 这一行注释掉就行 修改 Webpack 打包配置 修改 build/index.js 文件，把 build 对象下的
vue 打包html静态页面,vue项目打包、vue项目打包后空白界面解决办法
weixin_28689507的博客
06-04 2421
Vue脚手架提供了一个命令npm run build进行打包项目，在package.json中有一个build属性，对应执行命令node build/build.js。执行成功后，项目目录下多了一个dist目录，dist目录下有static目录和页面index.html。static目录下有css、fonts、js文件。但是这样直接打包后会出现空白界面问题，因此在打包之前需要修改配置文件再打包。空...
vue打包成html不能用,Vue 打包的静态文件不能直接运行的原因及解决办法
weixin_42513038的博客
06-20 1443
问题吾辈使用 vue-cli 直接生成的 vue 模板项目，在模板之上继续开发的。然而在使用 npm run build打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？原因查看了一下打包后的 index.html 源码，终于发现了一个重要的点：所有涉及到路径的地方全都是以 / 开头的下面是吾辈打包后生成的 dist 目录dist:.│ index.html│└─static├─cs...
vue打包上线流程
zerolea的博客
03-24 845
vue项目打包上线流程
vue打包后生成可配置html数据的文件json，踩坑记录
gjylalaland的博客
03-17 586
然后网上找方法，好像是试了下axios来获取，忘了哪个方法了，总之会出现404获取不到地址，因为地址不能跟上面那样写了，要把public换掉 （"../.././config.json"）然后把<script type="text/javascript" src="./json/config.json"></script>放到public里面的html文件里。一开始用的require获取，在vscode里调试的时候都可以用，但是npm打包出来的json更改不了html的内容。
Vue打包静态资源本地访问（不用放在服务端）| 比如放在Android 应用中
汪随安的博客
05-13 6544
解决vue打包静态资源问题！一、 打包服务端访问资源，直接build就行了二、 打包成静态资源，build出问题啦！！ 一、 打包服务端访问资源，直接build就行了 打包成服务器访问的资源，是默认的打包方式，直接运行自带脚本npm run build,就可以将资源打包在dist目录下 打包好之后的文件为dist目录下的：static与index.html 打包完之后直接扔服务器上就行了，直接运行 二、 打包成静态资源，build出问题啦！！ 使用场景： 好比我写的是H5应用，放在浏览器上直接可以打开浏
vue打包静态资源配置
07-27
Vue在打包静态资源时，需要进行一些配置以确保正确地将资源打包到最终的生产环境中。 首先，在Vue的配置文件vue.config.js中，可以设置outputDir选项，用于指定打包输出的目录。可以通过设置该选项的值为一个相对或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值