Vue项目部署,打包发布上线

参考vuecli官方文档

一、构建打包

在发布上线之前,我们需要执行构建打包,将 .less、.vue、.js 等相关资源进行编译打包,转换成浏览器可以直接识别运行的普通 css、js、html。

# yarn run build 或者 yarn build
npm run build

在这里插入图片描述
VueCLI 会把打包结果生成存储到项目的 dist 目录中。

正确的话应该会得到这样一个打包结果:
在这里插入图片描述

二、本地预览测试打包结果

注意:不能直接双击打开 index.html 运行。

将 dist 放到一个 Web 服务器中运行测试,常见的 Web 服务器:

Ngxin
Apache
tomcat
IIS
。。。。
Node.js

前端安装配置上面的服务器软件麻烦,这里推荐使用 Vue 官方推荐的一个命令行 http 服务工具:serve

dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值),所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如 serve:

安装:

# yarn global add serve
# 注意:这是在安装全局包,在任何目录执行都可以
# 安装一次就可以了,以后不需要重复安装,顶多升级重装
npm install -g serve

在这里插入图片描述

然后在你的项目目录下执行:

# dist 是运行 Web 服务根目录
serve -s dist

如果启动成功,你将看到如下提示:
在这里插入图片描述

在这里插入图片描述

serve 默认占用 5000 端口并启动一个服务

然后在浏览器中访问给出的地址访问测试。

你自己先大概的测试一下,确保打包结果可以正常运行,然后交由专业的测试人员进行测试。

如果测试出问题怎么办?

修改 src 源代码
重新构建打包

注意:

不要去修改 dist 中的文件代码,没有用。

因为每次 npm run build 都会先把原来的 dist 删除,然后生成新的结果。

三、部署

公司有专门的 devops,说白了就是运维
有些公司没有专门的运维人员,那就后端负责

你只需要把打包结果给人家就可以了

如果想要自己部署,怎么办?

买一个服务器
安装服务器运行环境
阿里云、腾讯云、…

买个域名(非必须)
第一次买非常便宜,几十块钱,续费非常贵

把项目代码推送到你的部署服务端

四、21云盒子

21云盒子技术文档

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470453.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python将数组写入文件_python – 将numpy数组的大小写入二进制文件

我需要将2D numpy数组写入文件,包括其尺寸,以便我可以从C程序中读取它并创建相应的数组. 我已经编写了一些保存数组的简单代码,可以从C中读取,但如果我首先尝试编写数组的大小,它总会给我一个错误. 这是我的简单python代码: 1 file open("V.bin","w…

spring源码编译和导入eclipse

1、下载源码并解压 https://github.com/spring-projects/spring-framework/tree/v3.2.5.RELEASE 2、源码编译 cmd进入spring源码根目录,执行编译源码:gradlew build可能出现问题:(1)如果出现某些方法找不到&#xff0…

大学python教材思维导图_Python核心知识体系的14张思维导图

本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库)。 按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典&#x…

华为OJ平台——整形数组合并

题目描述: 将两个整型数组按照升序合并,并且过滤掉重复数组元素 输入: 输入说明,按下列顺序输入:    1 输入第一个数组的个数    2 输入第一个数组的数值    3 输入第二个数组的个数    4 输入第二个数…

python 函数式编程包_python 函数支持函数式编程的包operator partial

itemgetter和attrgetter能替代从序列中取出元素或读取对象属性的lambda表达式,会自动构建函数 itemgetter 1,根据元组某个字段给元组列表排序,下例中 itemgetter(1) lambda field : field[1] 2,如果把多个参数传给itemgetter ,它构建的函数会…

Node中使用token(基于第三方包jsonwebtoken)

一、jsonwebtoken 用于生成token(加密) > jsonwebtoken 1. 安装 npm i jsonwebtoken --save 2. 使用 2.1 引入 2.2 加密 用户登录成功后,后端生成token,返回给前端 二、passport、passport-jwt 用于验证token&#xff0…

写了cookie阻止通过输入地址直接访问下一个html,但是直接输入地址访问时,会闪一下下一个页面,怎么回事啊????、...

描述:做了两个页面login.html index.html 在index的body加了onload事件,调用一个js,js中有cookie的判断,防止没有登录就打开index.html,如果没有登录跳回到login.html 但是!!!&am…

concurrently同时开启多个监听服务

当我们使用nodejs和vue混合开发的时候。当要同时启动后台服务,和前端服务的时候,我们可以使用concurrently 一、安装concurrently包 npm install concurrently --save-dev 二、配置 配置vuecli创建的项目中的packag.json文件: 2. 配置node…

es6 数组合并_JavaScript学习笔记(十九)-- ES6

ES6新增的内容之前的都是 ES5 的内容接下来我们聊一下 ES6 的内容let 和 const 关键字我们以前都是使用 var 关键字来声明变量的在 ES6 的时候,多了两个关键字 let 和 const,也是用来声明变量的只不过和 var 有一些区别1、let 和 const 不允许重复声明变…

常用的加密解密算法

import java.security.MessageDigest; import java.security.NoSuchAlgorithmException;/*** Java常用的对密码加密的方法 对摘要信息进行加密编码*/ public class PasswordUtil {private final static String[] hexDigits { "0", "1", "2", &q…

vue-cli4.x 中 配置允许跨域请求

在项目根目录下创建vue.config.js文件: vue.config.js: module.exports {devServer: {host: localhost,port: 8080,https: false,open: false, // 配置自动启动浏览器hotOnly: true, // 是否热更新proxy: {/api: { // 路径中有 /api 的请求都会走这个代理target: …

怎样不停请求接口实现实时刷新_快狗打车实时数仓和基于Hologres的数据服务建设...

前言 数据的实时化是最近几年数据行业很重要的趋势,我们在去年底也建立起新一代的实时数仓,但是在数据应用上一直没有取得很大的突破,我们希望实时数仓不仅仅是支撑大屏、核心实时报表、个别实时应用等简单的场景,希望更大…

c/c++参考文档

http://www.cplusplus.com/reference/cstdio/ 转载于:https://www.cnblogs.com/haxianhe/p/9271192.html

Vuex在项目中使用

案例1: 案例2: Token 是用户登录成功之后服务端返回的一个身份令牌,在项目中的多个业务中需要使用到 校验页面的访问权限 访问需要授权的 API 接口 … 但是我们只有在第一次用户登录成功之后才能拿到 Token。 所以为了能在其它模块中获取…

办公室分配方案python_Python自动化办公室(1),python,一

输出目录下所有文件及文件夹 创建临时文件及文件夹 输出目录下所有文件及文件夹 os模块简介 os是pyhon标准库,可以实现和操作系统有关的操作,例如创建,移动,复制文件和文件夹,文件路径和名称处理等等 注意:…

Vue移动端项目——Vant 移动端 REM 适配

Vant官方文档 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 rem lib-flexible 用于设置 rem 基准值 下面我们分别将这两个工具配…

Win7_刻录DVD

1、刻录 临时文件夹: 1.1、C:\Users\具体的用户名\AppData\Local\Microsoft\Windows\Burn 1.2、双击 插入刻录盘的光驱,直接将文件复制到 这里,实际上也就是 复制到 上面的文件夹中。 2、UltraISO 的 路径: C:\Users\33\AppData\L…

findbugs使用_FindBugs,一个帮你找bug的IDEA插件

前言 Findbugs很多人都并不陌生,Eclipse中有插件可以帮助查找代码中隐藏的bug,IDEA中也有这款插件。这个插件可以帮助我们查找隐藏的bug,比较重要的功能就是查找潜在的null指针。 在编写代码的过程中,我们可能不会一直记得检查空的引用,在我们测试时可能…

Java常量的应用

所谓常量,我们可以理解为是一种特殊的变量,它的值被设定后,在程序运行过程中不允许改变。 语法:final 常量名 值; 使用fianl关键字 常量名 值final String a1 "道具卡";fin…

Vue移动端项目——字体图标的使用

使用 iconfont 制作字体图标 设计师为我们单独提供了设计稿中的图标,为了方便使用,我们在这里把它制作为字体图标。 制作字体图标的工具有很多,在这里我们推荐大家使用:https://www.iconfont.cn/。 (1)登…