最新打包vue cli 4.5 项目时，体积尽然达到了9M，页面访问的速度，因此进行尝试进行优化，最终压缩到 968k ，效果明显。下面是优化方法。首先新建文件'vue.config.js'，放在项目根目录下，与package.json在同一级目录下1.BundleAnalyzer 作用：展示打包图形化信息，会打开一个html页面，帮助自己分析哪些文件过大，可针对其进行优化，上线前&nb
转载
2023-10-12 21:09:44
165阅读
最新打包vue cli 4.5 项目时，体积尽然达到了9M，页面访问的速度，因此进行尝试进行优化，最终压缩到 968k ，效果明显。下面是优化方法。首先新建文件'vue.config.js'，放在项目根目录下，与package.json在同一级目录下1.BundleAnalyzer 作用：展示打包图形化信息，会打开一个html页面，帮助自己分析哪些文件过大，可针对其进行优化，上线前&nb
转载
2023-11-22 07:03:28
139阅读
【VUE】vue打包后引入js和css用相对路径引入。解决方案 vue.config.js。原因 loadUserOptions。
原创
2024-03-09 08:38:14
288阅读
css代码中背景图片是根据相对路径来写的，如下图：
原创
2022-03-02 11:32:16
690阅读
vue 项目通过android studio 离线打包参考链接：https://nativesupport.dcloud.net.cn/AppDocs/download/androidvue项目执行 npm run build 打包生成dist文件使用 hbuilderX新建一个项目把打包好的dist里面的内容copy到新建的项目下vue2.xvue3.x选中需要打包的app项目 点击发行–>
转载
2023-11-24 11:34:08
197阅读
目录一、vue-cli3项目：1、项目根目录创建环境文件2、 配置打包指令3、打包生成不同的dist文件夹二、vue-cli2项目1、配置指令2.创建环境文件3、config/index.js中添加三、遇到的问题1.vue-cli3项目配置打包指令，没有生成css文件--mode test2、vue-cli3生成css/js文件生成名称和默认打包指令生成的不一样3、env.test 使用test
转载
2024-01-02 11:16:00
63阅读
安装完vue后搭建了一个项目，直接执行 npm run dev 是可以正常打开页面的： 但是执行 npm run build 打包项目后打开却报错了，如下： 原来是项目中的静态文件路径报错了。。。 然后就针对这个问题去查找解决方法： 第一步： 第二步： 找到下面文件，添加一行代码： 第三步： 重新执
原创
2018-06-28 15:48:00
1204阅读
一、首先安装jenkins和gitLab（可自行百度查看如何安装jenkins和gitLab），并在jenkins所在服务器安装vue项目打包所需工具，包括node.js；vue-cli脚手架，webpack工具，还需在jenkins服务器安装git工具用于进行git项目下载。安装内容：1、vue部分：(1)Node.js（安装完成后检查node和npm版本是否已安装完成，命令node -v）(2
转载
2024-09-13 13:59:28
174阅读
前言 我们有时候因为一些特殊需求，可能需要将js/css/img等资源文件都打包到根路径下，但vue-cli3.0的路径配置中仅有assetsDir配置项能够配置所有的静态文件所在的文件夹，并不能针对css/js/img等资源文件分别来做设置，那么请看我如何尝试的吧！ 分析 众所周知，vue-cli
转载
2020-12-08 14:51:00
256阅读
2评论
前戏 Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要结合插件来使用，这些插件在Webpack 中被称为 Loader （加载器） 来进行转换。 Loader 可以理解为是模块和资源的转换器，它本身是一个函数，参数接受的是源文件， 返回值是转换后的结果。 这
原创
2022-07-07 10:45:41
386阅读
初始化：npm init -y安装webpacknpm install webpack webpack-cli --save-dev安装vuenpm i --save-dev vue vue-loader vue-template-compiler 安装css的插件npm install --save-dev style-loader css-loader...
原创
2021-07-05 13:48:48
481阅读
vue-cli项目打包需要修改的路径问题命令行输入：npm run build打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。第一个问题，文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。解决：到config文件夹中打开index.js文件。文件里面有两个assetsPublicPath属
转载
2024-04-03 09:16:48
1338阅读
以这个审批设置为例里面是个vue项目，没有直接放在a.xxx.com下面，而是放在了/espace/下面修改1.router.js2.vue.config.js3.nginx配置server { listen 8001; location / { root /opt/espace; #示例 /root/lc/dist #注意：用‘/’ index index.html index.htm; try_files $uri $uri/
原创
2021-07-12 11:13:14
384阅读
以这个审批设置为例里面是个vue项目，没有直接放在a.xxx.com下面，而是放在了/espace/下面修改1.router.js2.vue.config.js3.nginx配置server { listen 8001; location / {
原创
2022-01-29 10:26:31
569阅读
vue打包路径和服务代理配置使用步骤1.首先在 vue 的项目下面 新建一个 vue.config.js 该文件夹和src是同级的文件夹。2.文件夹的内容如下 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档使用步骤1.首先在 vue 的项目下面 新建一个 vue.config.js 该文件夹和src是同级的文件夹。2.文件夹的内容如下代码如下（示例）：module.export
转载
2024-09-20 18:47:44
160阅读
vueCLI3.0部署服务器因工作需要.vue项目部署到服务器上.使用finalShell链接服务器与xshell基本相同.Xftp6来传输文件vue项目打包npm run build此时目录会多出一个dist文件夹.这就是我们打包好的项目.可以进入dist文件夹,打开里边的index.html文件.但是发现是空白的.这里提供一个方法可以查看,但只针对CLI3的架子.在项目所在路径cmd第一步执行
解解决决Vue项项目目打打包包后后打打开开index.html页页面面显显示示空空白白以以及及图图片片路路径径错错误误的的问问题题V ue项目运行npm run build后会生成一 dist文件夹，我们一般都是把这 文件夹部署到服务器上。dist文件夹里边有一 static文件和一 index .html页面，这 index就是最后单页面的最终文件。问问题题一一：：我在打包完成后，打开index
转载
2024-02-19 15:00:45
177阅读
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阅读
{ test: /\.css$/, use: Extrac
原创
2022-08-29 16:40:36
279阅读
打包后的登录页面背景不出来，怎么办？1. 静态资源路径错位问题解决方案：在项目/config/index.js中找到module.exports中的build
转载
2022-05-26 16:48:49
494阅读
