VUE学习(五)VUE项目发布启动

最新推荐文章于 2024-02-01 15:56:25 发布
原创 最新推荐文章于 2024-02-01 15:56:25 发布 · 231 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #学习 #前端

本文介绍如何通过npm构建Vue项目，并将其部署到Nginx服务器上。具体步骤包括：使用npm run build命令打包项目；下载并运行Nginx；将dist目录下的文件复制到Nginx的html目录；最后通过localhost访问已部署的应用。

在项目目录下运行 npm run build

 2.下载nginx

nginx: download

双击nginx.exe运行

 3.将打包好的vue项目下dist目录所有文件拷贝

 4.粘贴至nginx目录html下

5.此时在浏览器中输入localhost

即可看到发布的网站了

 

 

vue 的网站项目发布到阿里云服务器
aystl_gss的博客
09-22 505
vue项目在阿里云服务器上的发布流程
Vue2.0如何发布项目实战
08-29
首先，我们需要了解发布流程的基本步骤，包括创建Vue项目、项目打包和最终的发布。 ### 一、创建Vue2.0项目 创建Vue2.0项目通常使用`vue-cli`（Vue的命令行工具）来初始化一个基于Webpack模板的新项目。以下是创建...
前端(vue)npm如何发布自己的包
HouMengFei_的博客
06-26 1560
前段npm发布自己的包
vue安装、打包、发布
天行健-君子以自强不息
01-17 870
tips:可以在cmd命令窗口输入命令 tasklist /fi "imagename eq nginx.exe" ，出现如下结果说明启动成功。(2)打开命令窗口，切换到nginx解压目录下，输入命令 nginx.exe 或者 start nginx ，回车即可。测试，打开浏览器输入localhost, 注意端口号必须要跟nginx上面配置一样。打开nginx目录下的、conf文件夹下的nginx.conf文件。(1)直接双击nginx.exe，双击后一个黑色的弹窗一闪而过。c.修改nginx配置。
Vue项目——文章发布和修改
李公子的博客
09-03 4575
项目地址：https://gitee.com/liangPromise/vue-app-toutiaoAdmin/tree/article/ 创建组件并配置路由 1、创建 src/views/publish/index.vue 组件 2、配置页面路由 { path: '/home', component: () => import('@/views/home/Home.vue'), children: [ { ...
Vue（七）：vue项目发布到服务器
Start_Simple的博客
07-29 5208
打包、部署、Nginx的启动停止和重启、发布失败的强制写入方法、打包部署后请求不到后台接口解决方法
vue3+vite创建项目-（傻瓜式教程）
01-19
Vue3 + Vite 创建项目教程 Vue.js 是一个流行的前端框架，它的最新版本Vue3引入了许多新特性，如Composition API、Suspense、Teleport等，提供了更好的性能和更灵活的开发体验。Vite是由Vue.js作者尤雨溪开发的一款...
Vue修改项目启动端口号方法
01-19
在项目的package.json中可以找到如下代码 start属性指定的文件就是通过开发模式启动的服务文件 scripts: { dev: node build/dev-server.js, start: node build/dev-server.js, build: node build/build.js, ...
详解VSCode配置启动Vue项目
01-21
下载安装并配置VSCode 随便百度上搜个最新的VSCode... vue-html: html, vue: html } 2、eslint插件的安装 eslint智能错误检测插件，在具体开发中作用很大，能够及时的帮我们发现错误。至于安装，同样打开插件扩展窗
vue项目启动出现cannot GET /服务错误的解决方法
10-15
在开发Vue项目时，有时会遇到“Cannot GET /”的错误，这通常意味着浏览器无法找到你期望的资源。本文将详细解析这个问题的原因以及提供几种有效的解决策略。 首先，"Cannot GET /"错误通常出现在尝试访问应用程序...
Vue项目打包并发布的完整步骤记录
weixin_59127121的博客
09-19 2212
如何将Vue项目打包并发布？
Vue 项目的成功发布和部署
A____t的博客
05-08 6943
Vue 项目的发布
Nodejs+vue+ElementUi新闻发布系统助学网站 _c69rd
最新发布
豆包程序员
02-01 557
用户使用版块：可以选择注册并登录，可以浏览信息、可以网上互动、发布文章、内容推荐等。后台管理员管理版块：以管理员身份登录网站后台，拥有权限的管理员将对整个网站进行管理，包括对于用户发布的文章进行审核，对用户基本信息进行修改，对用户发布评论等信息进行修改和删除等。2.角色切换模块：本网站针对小学生、初中生、高中生、大学生多种群体，登录后可以根据需求进行选择，选择完成后，各个模块就会变成对应的内容。1.登录模块：进行新用户的注册或登录，以及管理员等不同权限的用户进行登录。拥有权限的管理员将对整个网站进行管理，
vue项目启动与打包简要总结
BHSZZY的博客
12-07 4259
1.首先，需要安装nodejs，版本需要与其它同事的保持一致，否则可能出现打包报错的情况； 安装msi格式的nodejs，就可以不用手动配置环境变量。2.如果有必要，修改npm下载源为公司内网源（如果允许访问外网，可以找cnpm使用淘宝源的方法） 3.从git上下载完项目后，需要在项目文件夹中打开cmd，使用命令，下载相关依赖包。1.确认项目中的文件，其中有个字段，不同项目可能配置的不一样。 (1)可能是这样配置的： 这样的，是默认配置，可以使用启动项目，使用打包项目。(2)可能是这样配置的： 这样的，就是
springboot+vue网站部署及微信小程序发布
qq_44181935的博客
02-01 2459
springboot+vue在服务器上如何部署以及网站进行申请域名，备案
vue项目打包发布上线方法
lchmyhua88的博客
10-09 6867
vue项目开发完毕后，我们需要将项目打包上线，同时我们希望可以在本地预览生产环境项目。（以下以vue-cli脚手架生成的项目为例） 发布服务器 1、运行打包命令 npm run build 运行后生成dist文件夹,将dist文件夹发布在服务器中。 我们在nginx中通过代理来访问： 首先本地的代码在额米有打包之前： 在执行npm run build之后会在本地项目的根目录下面生成一个dist目录： 接着我们通过nginx代理来访问，NGINX配置如下： server { ...
vue.js 2.* 项目 环境搭建、运行、打包发布（常规版）
热门推荐
Aimee的博客
07-14 1万+
Vue 安装 vue-cli /webpack 全局安装 如果在意安装速度，可以使用淘宝镜像来安装 安装淘宝镜像 npm install -g cnpm –registry=https://registry.npm.taobao.org 安装完淘宝镜像后，就可以使用cnpm 来代替 npm 安装工具啦 我个人比较喜欢直接使用npm 安装： 全局webpack： npm ins...
Vue项目从创建到发布的流程
Tom__cy的博客
06-12 3868
只是我个人的操作流程 创建一个新项目，个人webpack创建 https://blog.csdn.net/Tom__cy/article/details/90213684 创建完安装npm包 npm i or yarn add 启动项目 npm run dev or yarn run dev 安装自己需要的依赖 个人一些基础的: axios: https://github.com/axios/...
Vue项目启动：详解Vue实例与关键配置
本文档主要介绍了Vue组件实例的学习以及项目启动过程。在Vue开发中，创建一个Vue应用的核心是通过`Vue`构造函数实例化一个Vue实例对象。当直接打开`index.html`文件并引入打包后的Vue代码时，这个过程可以分为以下几...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值