首先在config/index.js中配置相对路径找到assetsPublicPath:’/'在’/‘前加点assetsPubl.
原创
2022-07-06 16:30:29
392阅读
添加icon参考文档1. 在项目根目录（index.html同级目录）下添加favicon.ico文件2. 在项目index.html中引入图标<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />复制代码3. 配置webpack配置文件(build文件夹下面)在 webpack.dev.conf.js
转载
2021-01-30 12:38:11
1037阅读
2评论
在项目根目录中执行如下命令： npm run build 注：Vue脚手架打包的项目必须在服务器上运行，不能直接双击运行； 在打包之后项目中出现 dist 目录，dist 目录就是 Vue脚手架项目的生产目录（直接部署目录）。 ...
转载
2021-10-02 13:21:00
485阅读
2评论
前文 Vue - Vue CLI(4): Vue-CLI2 和 Vue-CLI3、Vue-CLI4的区别 里面有提到：Vue CLI3、Vue CLI4新建的项目，根目录结构内 少了之前的 build、config、static文件夹，配置文件也少了几个，连 index.html 都没有了，但多了一个 public 文件夹。那么问题来了，既然没有了 build、config文件夹，那么项目
转载
2021-05-10 18:15:29
1442阅读
2评论
1、项目创建首先我们要安装好vue，网上安装教程很多，这里就不就行介绍啦 下面我们就可以进行，我们的项目创建了 首先打开一个我们需要创建项目的目录在该目录下打开我们的cmdvue init webpack vue-demo1 #这里的vue-demo1就是我们所要创建的项目的名称剩下的就一直回车就可以了 等着创建完成就可以了 然后，我们cd进入到我们刚刚创建的工程目录中 在输入我们的运行命令npm
转载
2023-09-22 14:38:27
151阅读
目的： 提高打包速度 减小项目体积、提高首屏加载速度 提高用户体验（骨架屏） 1.使用CDN 加速优化 cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样vendor.js会显著减少，并且大大提升项目的首页加载速度。 2.图片压缩 需要下载 im ...
转载
2021-07-19 18:27:00
1435阅读
2评论
1.vue项目打包1.1 终端运行打包命令在编辑器的终端运行vue项目打包命令yarn run build打包成功如下：这时我们可以看到项目目录多出来一个dist文件夹，记住它，后面部署就靠它了。1.2 修改配置就我个人部署经历(宝塔面板快速部署)来说，这个配置是一定要修改的，如果不修改配置，直接将build后的dist包部署，运行后页面是空白的。修改配置要分两个处理方式（vue-cli2和vue
转载
2023-12-17 10:28:06
81阅读
前端项目打包、Nginx的启动暂停、Nginx配置1、前端打包首先配置前端环境.env.preview文件中VUE_APP_API_BASE_URL指向后端地址之后，使用命令 yarn run build 打包后前端根目录出现dict文件夹yarn run build 或者 npm run build使用Nginx代理部署前端 -配置内容server {
listen
转载
2024-06-10 10:23:27
1555阅读
最近公司把云平台产品用vue 前后端分离的框架来写，前面大部分开发都比较顺利，后面打包部署出了bug 现在记录下自己遇到的哪些坑 1，我直接npm run build 打包出来，打开dist目录下面的index.html 空白页，页面上出现 no "NODE ENV"是我打包时没有指定打包到哪个环境
转载
2018-07-06 15:14:00
302阅读
Vue-cli项目部署到Nginx项目环境：nginx/1.16.1，vue-cli/3.11.00. Nginx使用以windows版为例，下载niginx压缩包并解压到任意目录，双击nginx.exe，在浏览器中访问http://localhost，如果出现Welcome to nginx!页面则说明成功。nginx常用命令如下：nginx -h # 打开帮助
nginx -t # 检查配
转载
2024-08-06 21:55:08
118阅读
1、一般打包 ：直接 npm run build。（webpack的文件，根据不同的命令，执行不同的代码的） 注：这种打包的静态文件，只能放在web服务器中的根目录下才能运行。2、在服务器中 非根目录下 运行的 打包：需要配置 参考： 3、在本地文件系统中打开，不需要web服务器 暂时 不清楚4、使用 history模式 打包的 配置 ： http:
转载
2024-03-28 21:29:22
37阅读
前言Vue项目一般用于实现前端的单页面富应用，其打包后的文件可简单看作静态文件，所以可以通过Nginx部署，当然也可以通过django部署(毕竟本质上还是一个html文件及各CSS,JS文件的集合)。不过前后端的耦合性以及性能就比nginx动静分离的差一点。但平时开发的时候可以这样部署，十分方便快捷。测试所使用框架版本 django 3.06，VueCli 3.0Vue打包修改vue.config
转载
2024-07-31 15:43:45
33阅读
在这篇博文中，我将讨论“Vue CLI将vue文件打包为JavaScript文件”的过程，包括其协议背景、抓包方法、报文结构、交互过程、异常检测及扩展阅读等内容。这个过程涉及Vue CLI的基本操作以及与应用程序的交互，下面我将详细阐述。
### 协议背景
在前端开发中，Vue CLI是一个强大的工具，它可以将 Vue 单文件组件 (.vue 文件) 转换为浏览器可执行的 JavaScript
转载
2020-04-22 14:08:00
132阅读
2评论
config文件夹内容修改一、index.js修改二、test.env.js新增build文件夹内容修改一、webpack.test.conf.js新增二、build-test.js新增package
原创
2022-01-13 17:30:40
636阅读
从三个插件开始1、CommonsChunkPlugincommonsChunkPlugin 是webpack中的代码提取插件，可以分析代码中的引用关系然后根据所需的配置进行代码的提取到指定的文件中，常用的用法可以归为四类：（1）、提取node_modules中的模块到一个文件中；（2）、提取 webpack 的runtime代码到指定文件中；（3）、提取入口文件所引用的公共模块到指定文件中；（4）
前言现在项目都是前后端分离的，所以前端要会部署前端项目。Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用，所以我们的项目也使用Nginx部署。打包项目首先，使用vue打包命令,打包待部署的项目，生成dist文件夹备用：npmrunbuild服务器安装Nginx输入nginxv,看是否正确输出Nginx的版本号，如果可以正确输出
原创
2022-08-14 23:35:21
1046阅读
前端每次打包完成项目后都需要连接服务器上传到指定文件夹，这样子很繁琐也很浪费摸鱼的时间，所以我根据学到的打包钩子突然奇想，利用package.json文件执行的脚本完成打包并自动部署一体化，我的思路是打包完成后压缩文件夹然后上传至服务器目录进行解压替换，我可能不是第一个想到这种方法的，但也是根据自己的思想总结出来的，整体实现如下。 每次打包都会执行npm run build 这个命
idea中打包vue项目1、首先使用idea打开vue工程，并在vue工程中找到其根目录的文件：package.json2、右击package.json文件，选择右击菜单下的open in terminal选项3、这是打开terminal控制台，会根据选择的package文件路径自动切换到此文件所在路径上4、在控制台输入npm run build，准备开始进行打包5、提示building for
转载
2023-11-23 12:31:51
110阅读
前言当我们开发完项目后，需要将项目部署到服务器上。这时，我们就需要对项目进行打包了，生成纯HTML、CSS和JS文件了。一般的，我们进行项目打包时只需要在命令行运行 npm run build 就可以进行项目打包了。但是如果不进行一些配置的话。我们就会遇到运行打包好的 index.html 文件，页面是全部空白的情况。这时，我们只需要进行下列设置即可：第一种错误：这个错误是因为没有在webpack
转载
2023-11-07 01:35:00
864阅读
