Vue项目进行打包

最新推荐文章于 2023-07-14 09:12:31 发布
最新推荐文章于 2023-07-14 09:12:31 发布
阅读量156 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leifeng27/article/details/116065073
版权

终端进入到你的vue项目中
输入npm run build
等待终端执行成功后你的vue项目中会出现一个叫dist的文件夹
在这里插入图片描述
里面会有这些文件
在这里插入图片描述这里的index.html 打开后就是你的整个项目页面了！

！
！
！
！
！
!
!
!

注意！！！
如过项目有的路径进不去，可以在你的vue中创建一个vue.config.js的文件
在这里插入图片描述
输入代码
在这里插入图片描述
这里的 baseurl: ‘./’ 是相对路径，而 'static’则是你打包后index.html所需配置的文件夹名称

Leifeng27
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
谁动了我的package-lock
Jioho的博客
07-27 691
血淋淋的教训只为呈现更好的文章内容 package-lock 介绍 nodejs 对 package-lock 的介绍：package-lock.json 文件 最重要的一句就是： 该文件旨在跟踪被安装的每个软件包的确切版本，以便产品可以以相同的方式被 100％ 复制（即使软件包的维护者更新了软件包）。 问题的出现 今天新开了一个项目，就把一个项目的脚手架复制到另外一个项目去。然后突然出现了各种各样的问题。 最离谱就是同样的代码，另外一个域名运行的好好的，就新项目各种问题。。。没报错，本地运行没警告~
vue封装一个图案手势锁组件
Twinkle_sone的博客
05-31 603
说在前面 🎈现在很多人都喜欢使用图案手势锁，这里我使用vue来封装了一个可以直接使用的组件，在这里记录一下这个组件的开发步骤。 效果展示 组件实现效果如下图： 预览地址 http://jyeontu.xyz/jvuewheel/#/JAppsLock 实现步骤 完成一个组件需要几步？ 1.组件设计 首先我们应该要知道我们要做怎样的组件，具备怎样的功能，这样才可以开始动手去实现。 功能上其实是已经很明确了，就是仿照手机上现有的图案锁来进行网页版组件开发。这里我们对入参和回调先进行一个大致的设计。 siz
vue项目根据打包命令不同，生成不同的basUrl
qq_36626404的博客
10-26 376
1.在根目录下创建.env.alpha的文件，文件内容如下 NODE_ENV = 'production' VUE_APP_NAME = 'alpha' 2.打开package.json文件，在script对象下加上 "alpha": "vue-cli-service build --mode alpha" 3.在baseUrl（当前是baseUrl.js）配置页面写上 export let baseUrl = ''; if (process.env.NODE_ENV == 'produc
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
最新发布
青春木鱼的博客
07-14 1万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
vue项目优化打包
qq_34093387的博客
06-19 3728
配置完成后，当我们在去请求接口时，就可以这么写 二、配置 alias 别名 使用vue-cli开发项目，最大特色是。组件中频繁引用其他组件或插件。我们可以把一些常用的路径定义成简短的名字。方便开发中使用 配置完成后，我们在项目中可以这样写路径 项目结束后打包前webpack配置 目的：打包前必做 项目开发完成后，运行进行打包操作。打包前对webpack配置。 一、去除生产环境sourceMap 问题： vue项目打包之后js文件夹中，会自动生成一些map文件，占用相当一部分空间 so
Springboot项目与vue项目整合打包的实现方式
08-25
Springboot项目与Vue项目整合打包的实现方式 在现代软件开发中，前端和后端项目的分离开发和集成是非常常见的。在这种情况下，我们需要在开发时将前端和后端项目分离，以便于更好地维护和更新代码。但是，在部署时...
vue移动端项目打包成app
01-08
这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看 我就讲解下整个思路和过程 首先项目开发完之后 （我使用的是vue-cli 3.*版本） 在项目文件夹下创建一个 vue.config.js module.exports ...
详解vue项目打包步骤
10-17
总的来说，Vue项目打包的过程涉及多个步骤，包括运行打包命令、理解Webpack配置、调整资源路径等。了解这些步骤有助于你在遇到问题时能够迅速定位并解决。在实践中，你可能会遇到更多细节问题，如处理CSS、...
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案是为了提升项目的性能和加载速度，尤其对于大型或者复杂的 Vue 应用来说，优化显得尤为重要。以下是一些关键的优化措施： 1. **不生成.map文件**： .map 文件主要用于在开发环境中进行...
浅谈vue项目打包优化策略
10-17
本文将深入探讨Vue项目打包优化策略，重点讨论如何通过组件按需加载和路由懒加载来缩减打包后的资源大小，提高首屏加载速度。 首先，项目在部署生产环境时，往往发现资源包过于庞大，比如打包后的vendor.js文件达到...
vue项目实现动态baseURL,可以在打包后进行配置
Along前端开发者
04-19 3047
目前推出这种方案：要在打包为dist后，依旧可以直接在dist中进行修改。并且生效。
【vue】index.html main.js app.vue index.js怎么结合的？ 怎么打包的？搜集的信息
08-14 306
转载：https://blog.csdn.net/yudiandemingzi/article/details/80247137 怎么结合的： 一、启动项目 第一步：cmd进入项目文件里，运行npm run dev 启动项目 这里说明启动端口号是8080 第二步：往页面输入：localhost:8080...
解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
ABC__789的博客
01-30 1243
解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
【Vue】package-lock.json的作用
Lanna_w的博客
10-22 4096
package-lock.json有什么作用呢？简单理解就是锁定dependencies的版本号。 一般来说前端的项目都有一个package.json文件管理依赖的版本号，在package.json文件里我们可以看到依赖的版本号前面一半有^和~这些符号。 ^：锁定大版本号，比如是^6.2.2，会匹配所有6.x.x的版本，更新的时候会下载最新的版本号 ~：锁定前面两个版本号，比如是^6.2.2，会匹配所有6.2.x的版本，更新的时候会下载最新的版本号 *：安装最新的版本号。 不同的下载时间、npm下载源不一样
vue index.html环境变量,Vue环境变量和模式
weixin_31066503的博客
06-19 1057
Vue环境变量和模式我最开始使用vue的判断环境的方法是let BASE_URL = process.env.NODE_ENV == "development" ? "http:/localhost" : "xxx"在这种情况下，需要先判断它的编译环境，进而根据环境适用对应的值。如果只有一个地方的变量跟环境有关，情况还好。但是若有多个，则需要复制多个判断或者封装成一个方法。但也只能使用于两个环境，...
vue项目中路径中为什么默认有index.html#
Roriring的博客
03-13 1万+
使用vue开发了很多手机app还有微信公众号页面，开始的时候一直都是在以完成项目为目的，没有去思考一些东西，只知道怎么去用，发现成长的太慢了。一段时间没有去开发vue的项目，突然有一天一个同事过来问我项目是不是出错了，搞了半天也没有找到问题，只是访问项目的时候浏览器页面一片空白，于是细心地去看了一下，后来想了一下该准备的东西都准备了，也没有报错是不是路径的问题，后来发现真的是这么回事，在访问的时...
vue添加axios，并且指定baseurl
热门推荐
archer的技术故事
09-16 4万+
vue添加axios，并且指定baseurl 本文主要介绍如何在vue项目中引入axios，并且在使用的时候指定baseurl。 好，下面上货。 1、首先需要的是一个vue项目，这个可以参考以前的文章。 2、然后是npm install axios --save-dev 3、在main.js中添加如下内容： import axios from 'axios'
对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】
05-11 1万+
当我们需要和后台分离部署的时候，必须配置config/index.js: 用vue-cli 自动构建的目录里面  （环境变量及其基本变量的配置） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var path = require
在vue项目中设置BASE_URL
a6559687的博客
09-28 4953
在vue项目中设置BASE_URL 　　1.在config文件夹中新建global.js文件 const BASE_URL = 'http://192.168.1.62:8080/rest/' export default { BASE_URL } 　　2.在入口文件中引入，设置为全局变量 import global_ from '../config/glo...
如何对VUE项目进行打包
07-11
3. 执行打包命令：运行以下命令来进行项目打包： ``` npm run build ``` 这将触发 Vue CLI 的构建过程，并在项目根目录下创建一个 `dist` 文件夹，其中包含了打包后的静态文件。 4. 配置打包选项（可选）：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值