vue 打包

最新推荐文章于 2024-09-19 19:00:27 发布
最新推荐文章于 2024-09-19 19:00:27 发布
阅读量319 收藏
点赞数
分类专栏： web前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xu838209490/article/details/79649604
版权

项目=>config=>index.js       配置服务器相对路径

module.exports = {

    assetsPublicPath: './',

}

打开终端  进入项目 

npm run build

生成的 dist 目录  放到服务器

輕描淡寫以後的以後
关注
专栏目录
vue打包（纯小白）
weixin_40854753的博客
12-09 427
vue纯小白打包 前提条件：先将git上的最新代码clone至本地 一:环境准备 1.安装Node.js 安装链接https://nodejs.org/en/ 点击这个下载，下载完成一步步安装，除安装路径可以自由选择外，其他都默认下一步直至安装完成 1.1.验证node安装 node -v，如下图表示安装成功 2.安装cnpm命令：npm install -g --registry=http://registry.npm.taobao.org 2.1.验证安装...
vue打包
我在深圳的这些日子的博客
09-24 438
1、修改vue.config.js publicPath: ‘/’,改为 publicPath: ‘./’, 2、 outputDir: ‘dist’,改为 outputDir: ‘dist/html’,
Vue实战指南：分解Vue项目大文件——Webpack打包方法
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-19 1812
在开发基于Vue.js的应用时，随着项目规模的扩大，单个文件的体积也会随之增长，特别是当涉及到大量的依赖库和复杂的业务逻辑时。本文将详细介绍如何使用Webpack来优化Vue项目的打包流程，包括代码分割、懒加载以及其他相关技术，以实现更高效的文件管理。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。代码分割是指将应用的代码拆分成多个较小的代码块(chunk)，使得只有在真正需要的时候才会加载这些代码块。一边打入敌人内部一边持续提升自己。
vue项目打包流程
weixin_45645412的博客
01-09 1万+
vue项目打包流程 二、打包优化 1.首先在根目录下面创建一个vue.config.js文件 2.去除.map文件，在vue.config.js文件里面抛出一个对象，然后把下面两段代码写到对象里面，然后在控制台或者终端通过npm run build命令，打包项目 注：如果一次不行，就在执行一次 module.exports = {}//在vue.config.js文件里面抛出一个对象 publicPath: "./", productionSourceMap: false, //不输出map文件 3
Vue项目的打包部署
程小白的博客
08-19 1361
一.当前开发模式 前后端分离的开发模式 前端和后端开发人员开发好后，要将前端项目和后端项目分别打包部署在前端服务器和后端服务器上。而当前最为流行的前端服务器为nginx。 二.打包 这样就完成了打包，打包完成后只需要将dist下面的资源部署在服务器上。 打包后的文件 三.部署 官网上下载 下载稳定版。 解压安装在一个没有中文和空格的目录下。 安装完成后打开所在文件夹，其文件夹功能介绍如下： 我们的项目文件（dist中的文件，为静态资源）就要拷贝到html文
vue 打包的方式
weixin_60208344的博客
01-01 4万+
我是一个苦b的程序员，今晚加班到快通宵了，困得快睁不开眼了，女上司很关心，问我要不要吃宵夜。我没好气地说，宵夜就算了，能让我睡一觉就行了。女上司红着脸说了句讨厌啊，然后坐在我身边不动，好像距离我很近，搞得我很紧张，难道她发现我的程序出了bug？ 今天分享的是vue项目中的打包方式： 一、使用vue-cli脚手架生成的项目 二、使用webpack 那么就让我们步入正题 第一种： vue create app生成项目的目录： 我们可以看到使用脚手架生成的项目是没有config文...
修改Vue打包后的默认文件名操作
11-20
本篇将详细介绍如何修改Vue打包后的默认文件名以及打包后的文件命名规则。 一、问题描述 当需要在同一服务器上部署两个或更多Vue项目时，由于Vue CLI默认将打包结果输出至`dist`目录，这可能导致不同项目之间文件...
如何修改Vue打包后文件的接口地址配置的方法
10-15
为了方便管理和维护，本文介绍了如何修改Vue打包后文件的接口地址配置。 在常规的Vue项目中，我们可以简单地通过修改配置文件来改变接口地址。具体操作是在项目的config文件夹下找到dev.env.js（开发环境配置）和...
springboot如何使用vue打包过的页面资源
08-25
Spring Boot 如何使用 Vue 打包过的页面资源 概括来说，本文主要介绍了 Spring Boot 如何使用 Vue 打包过的页面资源，通过示例代码详细介绍了整个过程。下面是对该主题的详细解释： 一、Webpack 打包 在使用 Vue ...
解决Vue打包后访问图片/图标不显示的问题
10-16
首先，我们需要理解Vue打包过程中资源处理的基本原理。在开发模式下，Vue CLI会自动处理静态资源，如图片和图标，通过`require`或`import`语句引入。但在生产环境下，Vue CLI会将这些资源移动到一个公共目录，并且会...
vue项目打包
风情
04-03 451
此外，如果你的Vue项目是一个单页面应用（SPA），那么打包后的文件通常只包含一个HTML入口文件和一些静态资源。如果你的项目使用了路由，那么所有的页面路由将由Vue Router在客户端处理，而不需要服务器端的路由配置。这些文件包括HTML、CSS、JavaScript以及可能的其他资源文件，它们都是已经压缩和优化过的，适合在生产环境中使用。这将会执行Vue CLI内置的构建脚本，将你的源代码编译成优化过的、用于生产环境的代码。目录中的文件部署到你选择的服务器或静态文件托管服务上。
vue项目打包步骤
热门推荐
从零出发
06-25 31万+
vue项目打包终端运行命令 npm run build打包成功的标志与项目的改变，如下图：点击index.html，通过浏览器运行，出现以下报错，如图：那么应该如下修改呢？具体步骤如下：1、查看package.js文件的scripts命令2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到in...
vue打包app
沙鑫741的博客
07-24 1016
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', ...
VUE---项目打包
sinat_34896766的博客
01-29 980
当项目做完，要 执行 npm run build 打包最终的结果（最终的结果会打包进dist文件夹）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值