Vue项目打包并发布的完整步骤记录

目录
  • 1、安装部署Nginx服务器。（类似Tomcat服务器）
  • 2、Vue项目打包。
  • 总结

如何将Vue项目打包并发布？我这边是测试发布到本地，不过步骤是一样的，步骤如下：

1、安装部署Nginx服务器。（类似Tomcat服务器）

说明：Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。同时，也是一种轻量级的Web服务器，可以作为独立的服务器部署网站。

（1）官方下载网址：http://nginx.org/

（2）下载之后，得到 nginx-1.21.6.zip 类似的压缩文件，解压到你想要的目录下。（特别注意：不要运行其中的nginx.exe文件！！！）

（3）使用cd命令到达nginx的加压缩后的目录：

D:\Tools>cd nginx-1.21.6

（4）启动nginx服务，启动时会一闪而过是正常的：

D:\Tools\nginx-1.21.6>start nginx

（5）查看任务进程是否存在：

D:\Tools\nginx-1.21.6>tasklist /fi "imagename eq nginx.exe"

（备注：如果没有启动报错了查看一下日志，在nginx目录中的logs文件夹下error.log是日志文件。常见的错误只要有：端号被占用或者nginx文件路径有中文）

（6）修改配置文件，进入解压缩目录，找到nginx.conf配置文件并修改。（这个根据自己需要）

（7）修改完成后保存，使用以下命令检查一下配置文件是否正确，后面是nginx.conf文件的路径，successful就说明正确了。

D:\Tools\nginx-1.21.6>nginx -t -c D:/Tools/nginx-1.21.6/conf/nginx.conf

（8）加载配置文件并重启nginx。

D:\Tools\nginx-1.21.6>nginx -s reload

（9）打开浏览器访问刚才的域名及端口（我本地是：http://localhost:8800），出现欢迎页就说明部署成功了

2、Vue项目打包。

（1）新建终端，执行如下命令：

npm run build

命令执行成功之后，项目目录下会生成一个dist文件夹 （里面包含：static文件夹和index.html文件）。--打包成功

（2）把dist文件夹下的所有文件复制到之前配置的nginx默认主页目录下（也可以是自己设置的网站目录）。

至此，Vue项目打包并本地发布成功。

总结

到此这篇关于Vue项目打包并发布的文章就介绍到这了,更多相关Vue项目打包发布内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

    Vue 安装 vue-cli /webpack 全局安装 如果在意安装速度,可以使用淘宝镜像来安装 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装完淘宝镜像后,就可以使用cnpm 来代替 npm 安装工具啦 我个人比较喜欢直接使用npm 安装: 全局webpack: npm install webpack -g vue脚手架vue-cli: npm install vue-cli -g 安装webp

  • 自定义Vue组件打包、发布到npm及使用教程

    本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 按照大佬文中写的一步步操作,够细心的话基本可以一步到位.下面总结一下发布步骤: 1. 利用Vue的脚手架新建一个简易版的Vue项目my-project: vue init webpack-simple my-project -> cd my-project -> npm i -> npm run

  • 解决vue 打包发布去#和页面空白的问题

    1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../yiTownWebApp/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../yiTownWebApp'), assetsSubDirectory: 'static', assetsPublicPath: '/yiTown

  • Vue插件打包与发布的方法示例

    插件打包与发布 插件功能开发完成后,若需要发布到公共组件库中(例如:npmjs),需要对插件进行打包并发布,简单说明一下这个过程,以插件名 dialog 为例 1.创建 dialog 目录,并进入 2.运行命令行,初始化项目,生成 package.json npm init -y 3.使用 webpack-simple 模板构建项目基本结构(前提为已自行安装好 vue-cli) vue init webpack-simple 根据导航提示,设置好项目后,基本结构生成完成 4.删除无用内容   删

  • 详解vue项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

  • 详解vue项目的构建，打包，发布全过程

    详解vue项目的构建，打包，发布全过程

    很多朋友对于VUE项目的一系列流程不熟悉,小编根据网友提出的问题,整理了关于vue项目的构建打包发布全过程,希望对你有用. 一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了 2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博客. 现在就有我来说说如何讲vue项目发布到github上 之前写过vue环境搭建 可以参考: vue环境搭建 二.vue项目的打包 1.大家都知道使用npm run bui

  • vue项目打包发布上线的方法步骤

    vue项目打包发布上线的方法步骤

    目录 一.开发环境到生产环境的转变 二.设置统一的请求路径 三.运行打包命令 vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-cli脚手架生成的项目为例) 一.开发环境到生产环境的转变 项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径. 打开项目中config文件夹里面的 dev.env.js 文件,将后端给的线上路径填入. 'use strict' module.exports = { NODE_E

  • 使用jenkins一键打包发布vue项目的实现

    使用jenkins一键打包发布vue项目的实现

    jenkins的安装 Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件. Jenkins 支持各种运行方式,可通过系统包.Docker 或者通过一个独立的 Java 程序. 安装 这里的操作系统为WSL Ubuntu,其它系统的安装的请参考jenkins官方文档 wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add - sudo sh -c 'echo de

  • Vue项目打包并发布的完整步骤记录

    Vue项目打包并发布的完整步骤记录

    目录 1.安装部署Nginx服务器.(类似Tomcat服务器) 2.Vue项目打包. 总结 如何将Vue项目打包并发布?我这边是测试发布到本地,不过步骤是一样的,步骤如下: 1.安装部署Nginx服务器.(类似Tomcat服务器) 说明:Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.同时,也是一种轻量级的Web服务器,可以作为独立的服务器部署网站. (1)官方下载网址:http://nginx.org/ (2)下载之后,得到

  • vue项目打包以及优化的实现步骤

    vue项目打包以及优化的实现步骤

    目录 vue项目的打包上线及优化 vue项目的打包 项目托管 项目的常见优化 vue项目的打包上线及优化 项目完成,我们会将项目进行上线,为了提升性能,我们往往会进行一些优化处理 vue项目的打包 脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包 打开终端,切换到项目根目录 输入命令:npm run build 会在当前项目的根目录下生成一个dist文件夹,里面就是打包后的文件 项目托管 我们可以创建一个简易的node服务器来托管打包后的项目,这样就可以模

  • vue项目引入svg图标的完整步骤

    目录 1. 安装svg依赖 2. 创建svg文件夹存放svg图标 3. vue.config.js 中配置svg图片 4. 创建index.js 导入所有svg图标 5. main.js中引入icons/index.js 6. 创建SvgIcon公用组件 总结 1. 安装svg依赖 在vue中首先需要安装可以加载svg的依赖. npm安装:npm install svg-sprite-loader --save-dev 2. 创建svg文件夹存放svg图标 创建icons文件夹,在icons文件

  • 将java普通项目打包成exe可执行文件的步骤记录

    将java普通项目打包成exe可执行文件的步骤记录

    前言 · 提示,无论打包成jar还是exe程序,运行都需要JDK,需要给没有安装JDK的电脑安装:不会安装JDK的朋友可以参考这篇文章:https://www.jb51.net/article/179937.htm · maven项目有自己的打jar包方式,我们普通的java项目,可以安照步骤一打包成jar: 步骤一.先把项目打包成jar包 1. 打开项目结构 2. 选择jar包形式 3. 设置主类 4. 构建 5. 确认构建 6. 打包完成,在项目的out目录下有jar了. 步骤二.把jar包

  • Vue项目中封装组件的简单步骤记录

    Vue项目中封装组件的简单步骤记录

    目录 前言 如何封装一个Toast组件 使用案例 具体实现 总结 前言 随着业务的发展 功能性开发 已经无法满足我们对于前端的需求,这一篇主要带大家体验一下如何开发一套属于自己的组件库 使用场景:公司内部组件库的开发,个人组件库的开发,与项目解耦,多项目中使用同一组件,只需维护一套组件库 如何封装一个Toast组件 组件说明: 实现提示功能. 效果展示: 实现的功能: 根据某个判断条件或者点击某个按钮,弹出弹框: 可配置位置,类型,样式名等 使用案例 1. 简单使用 vm.$toast('网络异

  • Vue插件从封装到发布的完整步骤记录

    Vue插件从封装到发布的完整步骤记录

    插件的分类 添加全局的方法或者属性 比如:vue-element 添加全局的资源 比如:指令 v-bind 通过mixin方法添加的一些混合 添加Vue实例方法 Vue.prototype上面 插件的使用 通过全局方法 Vue.use() 使用插件.它需要在你调用 new Vue() 启动应用之前完成: // 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin) new Vue({ //... options })``` 也可以传入一个选项对象: ``` ja

  • Vue封装通用table组件的完整步骤记录

    Vue封装通用table组件的完整步骤记录

    目录 前言 为什么需要封装table组件? 第一步:定义通用组件 第二步:父组件与子组件进行render通信 第三步:使用组件 总结 前言 随着业务的发展和功能的增多,我们发现不少页面都具备相似的功能,这里举几个比较俗的例子:可以多选的下拉菜单,带输入的对话框,日期选择器等等,于是我们会想办法将这些共有的功能抽取成一个个公共组件,以便能够在不同的页面或业务中使用. 为什么需要封装table组件? 后台管理系统表格使用频率高,减少关于table的业务代码,且便于后期统一修改.便于后期维护.如给ta

  • Vue项目打包部署到GitHub Pages的实现步骤

    Vue项目打包部署到GitHub Pages的实现步骤

    目录 前言 前期准备 重要说明 步骤1 步骤2 步骤3 步骤4 步骤5 步骤6 前言 关于什么是github pages?怎样创建github 仓库上传本地项目到GitHub远程仓库?等基本操作本文不再赘述,初学者可以通过搜索找到大量文章教程.本文重点在于: 如何将vue项目源码(含dist目录)同步到到github仓库,同时单独将项目下的dist目录同步到gh-pages分支以便使用GitHub pages 发布和预览静态网页. 针对以上问题,作者以往的做法是将Vue项目源码托管到源码仓库,然

随机推荐