vue打包一个项目

原创 已于 2022-10-24 09:46:00 修改 · 882 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #1024程序员节

于 2022-10-23 22:27:09 首次发布
本文介绍了如何使用npm run build命令打包前端项目，并通过宝塔面板将dist文件上传至服务器，以及设置域名指向，实现项目的上线部署。详细步骤包括：在终端运行打包命令，生成dist文件夹；登录宝塔面板，进入域名路径，上传dist文件夹；最后更新域名指向，完成部署。

一、首先再项目终端命令输入打包命令npm run build

然后再你的文件夹下会出现一个dist的文件

二、上传服务器
1.打开你的宝塔面板，进入到你的文件页面里打开你的域名下的路径


 把你的dist文件夹上传到你的该路径下

2.把你的域名指向换成你的dist文件即可

小董大咖
关注
vue-cli3 打包组件为单个js文件
baidu_33164415的博客
04-08 1288
vue-cli3 打包组件为单个js文件
Vue实现前端本地打包为一个zip文件
bruno_mars_brother的博客
07-02 1169
1、应用场景：打包下载的批量二维码图片 2、实际后端返回数据格式：图片联机数组集合，每个图片链接打开都是一张二维码图片 3、代码实现如下： 元素代码 <el-button type="primary" icon="el-icon-download" size="mini" @click="downloadCode"> 下载二维码 </el-button> js代码 第一步安装依赖包
Vue项目的打包方式、生成dist文件夹、assetsPublicPath、publicPath、history、hash
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
04-01 5982
Vue项目的打包方式、生成dist文件夹、assetsPublicPath、publicPath、history、hash
第九章 Vue-Loader 打包Vue单文件组件
qq_15906903的博客
01-19 1216
9.1 打包 Vue 基本配置 基于 webpack-demo6 安装 vue-loader 和 vue-template-compiler 依赖 修改 webpack.config.js 配置 在 src 目录下创建 App.vue 在 main.js 中导入 App.vue 导入之后，这个 App 组件就可以作为子组件进行使用了 打包 控制台不报错，说明配置正确打包成功 9.2 webpack与 Vue 单文件组件案例 创建 webpack-demo6 安装 vue
webpack打包vue单文件组件
weixin_30363981的博客
08-03 533
一、vue单文件组件 ①文件扩展名为.vue的 就是single-file components(单文件组件) ②参考文档：单文件组件 二、webpack加载第三方包 ①项目中，如果需要用到一些第三方包，比如vue.js，jQuery.js，bootstrap.js等等，如果使用一般的方法，直接import加载使用，然后打包成一个bubdle.js文件的话，因为第三方包的体积过大，最...
Vue项目打包编译优化方案
10-14
路由懒加载是另一个有效的优化策略，它可以延迟非首屏组件的加载。首先，安装 `@babel/plugin-syntax-dynamic-import` 插件。然后，在 `babel.config.js` 文件中配置该插件。最后，修改路由配置，将每个组件用函数...
Springboot项目与vue项目整合打包的实现方式
08-25
项目代码互不影响，借助Jenkins这样的构建工具在构建Springboot时触发前端构建并编写自动化脚本将前端webpack构建好的资源拷贝到Springboot下再进行jar的打包，最后就得到了一个完全包含前后端的Springboot项目。...
vue项目打包之后背景样式丢失的解决方案
10-17
在开发Vue项目时，我们经常会遇到一个问题：在项目打包完成后，部分页面的背景样式丢失，导致页面显示不正常。这主要是由于Vue CLI在构建过程中处理静态资源的方式导致的。本篇文章将详细介绍这个问题的原因以及提供...
vue项目打包后打开页面空白解决办法
08-27
在Vue项目开发过程中，打包后的页面空白是一个需要重视的问题。通过仔细检查和修改路径配置及路由模式，大多数情况下都能够解决这一问题。在本文中，我们详细探讨了导致白屏的可能原因，并提供了对应的解决方案。...
vue+netcore项目打包发布部署详细步骤，以及报错处理
最新发布
02-17
该命令会编译项目并将依赖项打包到一个输出文件夹中。根据不同的发布配置，可以发布为框架依赖或自包含部署。框架依赖部署需要目标机器上安装.NET Core运行时，而自包含部署则会将.NET Core运行时包含在发布包内，...
vue 打包
weixin_68169041的博客
07-29 561
vue 打包 含有 http 安装 打开 ...
vue项目打包时如何将静态文件打包到一个单独的文件夹
phplife的电子商务网上商城专栏
09-17 3890
vue项目打包时如何将静态文件打包到一个单独的文件夹
Vue-Loader 打包单文件组件实战
福仔的博客
05-10 1357
webpack 结合 Vue-loader 来打包 Vue 单文件组件知识的理解和应用。主要内容包括什么是单文件组件、vue-loader 是什么，单文件组件结构及代码编写，利用 Vue-Loader 打包单文件组件，为什么要采用 render 函数来渲染，webpack 模块热替换（HMR）
如何将项目里的vue组件单独打包?
xxcf2010的博客
12-21 2862
首先打开package.json，再scripts属性下添加以下命令： "scripts": { ... "lib:build": "vue-cli-service build --target lib --name VuePartivleground ./src/components/VuePartivleground/index.js", "lib:publish": "npm run lib:build && npm publish" }, VuePartiv
前端vue如何打包？
weixin_46923615的博客
12-28 645
运行命令npm run build。
Vue Router打包Vue单文件组件
qq_42972967的博客
12-31 232
8.1 什么是路由 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得非常简单。通过根据不同的请求路径，切换显示不同组件进行渲染页面。 8.2 基本路由使用 8.2.1 安装路由 注意：要安装 vue 模块 8.2.2 引入 vue-router.js 8.2.3 HTML 路由切换 <div id="app"> <div class="header"> <h1&...
在零配置的情况下，怎么启动、打包一个.vue文件？
weixin_30376509的博客
08-19 233
问题 比如我们在开发一个组件，以及做一些小demo的时候，怎么快速启动服务？ 解决 1、安装拓展 npm install -g @vue/cli-service-global 复制代码2、新建vue文件 建立一个vue-test文件夹，在里面新建一个kaimo.vue文件，写上vue代码。 <template> <div class="kaimo">{{ msg...
vuecli3打包插件（打包组件）为单个js文件
qq_67305990的博客
06-28 765
vuecli3打包插件（打包组件）为单个js文件。别再用vue init了_henjuewang的博客-优快云博客
WEB前端：vuejs全家桶（33）：单文件组件、webpack打包
weixin_43731793的博客
11-09 475
单文件组件 1. .vue文件 .vue文件，称为单文件组件，是Vue.js自定义的一种文件格式， 一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js .vue文件由三部分组成：<template>、<style>、<script> <template> html </te...
vue打包一个静态网站
05-02
在 Vue.js 中，可以使用 Vue CLI 工具来快速构建和打包项目。下面是一些步骤，介绍如何使用 Vue CLI 打包一个静态网站： 1. 首先，需要安装 Node.js 和 Vue CLI 工具。安装 Node.js 可以到官网下载安装包并安装，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值