参考:https://www.jianshu.com/p/8341edbc7436src/assets和static两个都是存放静态资源文件。src/assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行压缩打包上传,因此使用assets下面的资源,在js中使用的话,路径要经过webpack中的file-loader编译,引用时
转载 2024-01-01 19:28:51
556阅读
今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家打包之后打开dist的页面显示空白:这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的。build:
转载 2024-07-29 20:14:48
167阅读
静态资源处理:assets和static文件夹的区别相信有很多人知道vue-cli有两个放置静态资源的地方,分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。例如,在 <img src="./logo.png"> 和 background:
转载 2024-03-20 15:27:36
293阅读
vue项目默认的打包路径:根目录下的dist文件夹下; 但是在项目开发中,我们肯定希望项目提交到svn目录或者git目录下,否则每次复制过去,太麻烦了; 那怎么配置打包路径呢?下面来看看; 我们找到打包配置文件 "config/index.js"下的build属性 修改build.index和ass ...
转载 2021-10-12 13:29:00
3377阅读
2评论
1. 我们为什么要进行打包优化呢?1、打包优化的目的1、优化项目启动速度,和性能 2、必要的清理数据 3、减少打包后的体积第一点是核心,第二点呢其实主要是清理console2、性能优化的主要方向1、去重.map文件 2、开启CDN加速 3、代码压缩 4、图片压缩 (下方跳过) 5、公共代码抽离 6、首屏骨架屏优化 7、开启Gzip压缩2. 打包步骤详解代码演示:在vue.config.js中添加打
转载 2023-08-23 15:45:26
158阅读
Vue 项目在 build 之后通常都需要部署到服务器才能够访问,本文介绍如果使用 Nginx 部署 Vue 项目首先需要说明可能存在的误区我这个项目是使用的 Vue + SpringBoot 实现前后分离的项目也就是说在部署时,前端和后端要分别单独部署,前端通过请求后端的接口实现数据交互一开始我是打算将 build 后的 Vue 项目直接放到 Tomcat 的 /webapps/ 目录中,然后启
参考:https://www.jianshu.com/p/8341edbc7436 assets和static两个都是存放静态资源文件。assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,打包后的静态资源文件最终也都会 ...
转载 2021-10-19 00:03:00
2108阅读
2评论
command+c停掉项目后 输入命令npm run build:prod ...
转载 2021-10-31 14:11:00
417阅读
2评论
方案一:利用electron直接打包项目暂未成功,打包完exe会报错 打包方式:(1)DOS窗口命令打包 DOS 下,输入 npm install electron-packager -g全局安装我们的打包神器:cnpm install electron-packager -g(2)在项目文件夹下面,也就是根目录下面打开DOS执行打包命令:electron-packager . HelloWorl
转载 2024-02-29 21:43:44
141阅读
一、vue项目的创建 1、首先第一肯定是要有Node.js及npm这个不多说了 2、安装脚手架  此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博客。现在就有我来说说如何讲vue项目发布到github上之前写过vue环境搭建 可以参考: vue环境搭建  二、vue项目的打包 1、大家都知道使用npm ru
最新打包vue cli 4.5 项目时,体积尽然达到了9M,页面访问的速度,因此进行尝试进行优化,最终压缩到 968k ,效果明显。下面是优化方法。首先新建文件'vue.config.js',放在项目根目录下,与package.json在同一级目录下1.BundleAnalyzer 作用:展示打包图形化信息,会打开一个html页面,帮助自己分析哪些文件过大,可针对其进行优化,上线前&nb
转载 2023-10-12 21:09:44
165阅读
这篇文章主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 第一次使用vue2.0开发,之前都是用的angular1.x。在使用vue-cli脚手架打包后(UI用的Element-ui),发现vendor文件很大,将近1M左右。。后来翻阅资料才明白,原来webpack把所有的库都打包到了一起,导致
转载 2023-12-22 22:42:22
314阅读
我们使用Vue-cli的默认环境是只有dev和prod两种环境,在开发中我们的项目一般是开发版、测试版、pre版、Prod版。我们一般是在源码中API地址中修改后然后打包。###1、首先安装cross-envnpm i -- save- dev  cross - env###2、修改不同环境下的参数在config/目录下添加test.env.js、pre.env.js。修改prod.en
转载 2023-05-26 16:24:27
379阅读
1点赞
最新打包vue cli 4.5 项目时,体积尽然达到了9M,页面访问的速度,因此进行尝试进行优化,最终压缩到 968k ,效果明显。下面是优化方法。首先新建文件'vue.config.js',放在项目根目录下,与package.json在同一级目录下1.BundleAnalyzer 作用:展示打包图形化信息,会打开一个html页面,帮助自己分析哪些文件过大,可针对其进行优化,上线前&nb
转载 2023-11-22 07:03:28
139阅读
1、项目创建首先我们要安装好vue,网上安装教程很多,这里就不就行介绍啦 下面我们就可以进行,我们的项目创建了 首先打开一个我们需要创建项目的目录在该目录下打开我们的cmdvue init webpack vue-demo1 #这里的vue-demo1就是我们所要创建的项目的名称剩下的就一直回车就可以了 等着创建完成就可以了 然后,我们cd进入到我们刚刚创建的工程目录中 在输入我们的运行命令npm
文章目录1、安装cordova1、创建cordova项目,导入vue2、导入各种插件3.config.xml的配置3、调试与打包成APK3.1 **生成调试的APK**5、问题汇总5.1 cordova run android 时候 gradle的报错5.2 安卓版本过高,报错 net::ERR_CLEARTEXT_NOT_PERMITTED 1、安装cordova平台: Windows10必需
转载 2024-03-16 19:16:07
76阅读
前言前段时间写过一篇使用Hbuilder打包前端网站为WebApp(Android,ios应用)收到很多前端小伙伴私信,问我能不能写一篇vue开发的项目如何打包成android、ios应用,那么今天就带大家走一遍vue开发的项目如何打包,然后如何发布成android、ios安装程序,并安装在自己的手机上。vue-cli4搭建的项目如何打包基于vue开发的应用,现在主流的是使用vue/cli的4.x
转载 2023-09-28 10:38:51
148阅读
vite build --mode test
原创 8月前
69阅读
一、测试项目是否可以正确运行    指令:npm run dev首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目不必非得是像我这样的,这一步的目的只是测试一下咱们的vue项目是否可以运行 二、修改路径(assetsPublicPath: './')打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下
转载 2024-01-10 21:21:47
93阅读
一、vue单文件组件开发流程(webpack打包)1)源文件目录结构2)package.json3)webpack.config.js  HTML Webpack Plugin依据html模板生成一个自动引用你打包后的文件(js或css)的新的html页面,新文件默认名称为index.html。  运行.vue文件,需要依赖vuevue-loader、vue-template-compiler这
转载 2024-08-17 12:28:24
48阅读
  • 1
  • 2
  • 3
  • 4
  • 5