vue打包一个项目

已于 2022-10-24 09:46:00 修改
阅读量800 收藏
点赞数 1
文章标签： 前端部署 npm run build 宝塔面板 服务器配置 域名指向
于 2022-10-23 22:27:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddf__/article/details/127482368
版权

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

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

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


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

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

小董大咖
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Springboot项目与vue项目整合打包的实现方式
08-25
项目代码互不影响，借助Jenkins这样的构建工具在构建Springboot时触发前端构建并编写自动化脚本将前端webpack构建好的资源拷贝到Springboot下再进行jar的打包，最后就得到了一个完全包含前后端的Springboot项目。...
vue项目打包之后背景样式丢失的解决方案
10-17
在开发Vue项目时，我们经常会遇到一个问题：在项目打包完成后，部分页面的背景样式丢失，导致页面显示不正常。这主要是由于Vue CLI在构建过程中处理静态资源的方式导致的。本篇文章将详细介绍这个问题的原因以及提供...
第九章 Vue-Loader 打包Vue单文件组件
qq_15906903的博客
01-19 1026
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 470
一、vue单文件组件 ①文件扩展名为.vue的 就是single-file components(单文件组件) ②参考文档：单文件组件 二、webpack加载第三方包 ①项目中，如果需要用到一些第三方包，比如vue.js，jQuery.js，bootstrap.js等等，如果使用一般的方法，直接import加载使用，然后打包成一个bubdle.js文件的话，因为第三方包的体积过大，最...
vue 打包
weixin_68169041的博客
07-29 479
vue 打包 含有 http 安装 打开 ...
vue项目打包时如何将静态文件打包到一个单独的文件夹
phplife的电子商务网上商城专栏
09-17 3039
vue项目打包时如何将静态文件打包到一个单独的文件夹
Vue-Loader 打包单文件组件实战
福仔的博客
05-10 1167
webpack 结合 Vue-loader 来打包 Vue 单文件组件知识的理解和应用。主要内容包括什么是单文件组件、vue-loader 是什么，单文件组件结构及代码编写，利用 Vue-Loader 打包单文件组件，为什么要采用 render 函数来渲染，webpack 模块热替换（HMR）
Vue项目打包编译优化方案
10-14
路由懒加载是另一个有效的优化策略，它可以延迟非首屏组件的加载。首先，安装 `@babel/plugin-syntax-dynamic-import` 插件。然后，在 `babel.config.js` 文件中配置该插件。最后，修改路由配置，将每个组件用函数...
vue项目打包后打开页面空白解决办法
08-27
Vue 项目打包后打开页面空白解决办法 在 Vue 项目开发中，经常会遇到打包后打开页面为空白的情况，本文将详细介绍解决这种问题的方法。 一、路径问题 在 Vue 项目中，index.html 文件中的内容都是通过 script ...
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
10-16
Vue是一个构建用户界面的渐进式JavaScript框架，可以将单文件组件(.vue)打包成浏览器可以执行的JavaScript代码。 #### 打包过程解析 1. 在Vue项目中，`npm run build`命令通常在`package.json`的`scripts`部分配置...
前端vue如何打包？
weixin_46923615的博客
12-28 464
运行命令npm run build。
Vue Router打包Vue单文件组件
qq_42972967的博客
12-31 174
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 174
问题 比如我们在开发一个组件，以及做一些小demo的时候，怎么快速启动服务？ 解决 1、安装拓展 npm install -g @vue/cli-service-global 复制代码2、新建vue文件 建立一个vue-test文件夹，在里面新建一个kaimo.vue文件，写上vue代码。 <template> <div class="kaimo">{{ msg...
WEB前端：vuejs全家桶（33）：单文件组件、webpack打包
weixin_43731793的博客
11-09 419
单文件组件 1. .vue文件 .vue文件，称为单文件组件，是Vue.js自定义的一种文件格式， 一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js .vue文件由三部分组成：<template>、<style>、<script> <template> html </te...
自己动手 webpack 打包 vue 单文件组件
csdn姚宏波
03-10 3668
1. 为什么要了解这些 vue 的脚手架集成了 webpack，并进行了大量的默认配置 我们只需要按照框架的要求编写代码，打包就好了 慢慢的我们就成了傻瓜，不知道这其中到底发生了什么，一旦遇到问题，不知道该如何思考，因为你可能都不清楚它的运作原理 更何况，看尤大的思路，将来很可能使用脚手架创建项目时，打包工具不再是默认的，而是让你 webpack 和 vite 二选一 所以，我们就更需要对打包过程有一个大概的了解 下面我们就手动实现这一点 2. 动手实践 SPA 和组件化密不可分，组件化让S
vue文件单独打包css
weixin_30278311的博客
08-22 1154
单独打包需要使用extract-text-webpack-plugin插件； 我用的extract-text-webpack-plugin@2.1.2这个版本，webpack用的webpack2 配置如下: 1.先定义 const ExtractTextPlugin = require('extract-text-webpack-plugin'); 2.配置css和less {...
灵活使用vue单文件组件之--最少配置打包.vue组件
weixin_34185320的博客
12-13 417
对于vue单文件组件的使用，我们知道使用vue-cli可以快速生成项目结构，进行.vue单文件组件的编写，使用 npm run build命令会从main.js开始打包项目中的依赖(通常main.js中引用App.vue，作为页面最高层级的组件，我们自己写的组件会在App.vue中引用)，build的结果会生成打包好的静态js/css文件...
Vue实现前端本地打包为一个zip文件
bruno_mars_brother的博客
07-02 1055
1、应用场景：打包下载的批量二维码图片 2、实际后端返回数据格式：图片联机数组集合，每个图片链接打开都是一张二维码图片 3、代码实现如下： 元素代码 <el-button type="primary" icon="el-icon-download" size="mini" @click="downloadCode"> 下载二维码 </el-button> js代码 第一步安装依赖包
vue项目自定义打包的文件
逆风优雅的博客
11-14 401
​​​​​​​
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、付费专栏及课程。

余额充值