vue项目dev环境部署

最新推荐文章于 2024-04-10 11:13:15 发布
最新推荐文章于 2024-04-10 11:13:15 发布
阅读量3k 收藏 1
点赞数
分类专栏： 前端知識 文章标签： vue vue发布 部署
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38658567/article/details/83044033
版权

Vue项目webpack打包部署到服务器

- 如何打包

  • 基于Vue-Cli,通过npm run build来进行打包的操作
    注意npm run build打包成dist文件需要注意,项目中的package.json文件里面的script脚本,npm run 分别对应scripts下面的命令:

    在这里插入图片描述
    这里打包需要执行的是npm run build:prod
    在这里插入图片描述
    - 如何部署

  • 将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以直接将这两个文件扔到服务端;但有时候，我们会直接将dist文件扔到服务端

发布到jenkins

RachelHwang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue项目打包之开发环境和部署环境的实现
11-21
项目开发阶段和生产环境可能不一样 如前端在开发阶段，接口可能是自己使用 node.js 搭建的服务器，API 返回的也都是假数据，等后台接口开发好后，再切换成后台提供的接口，等测试没有问题，服务端上线后，又要改成...
【vue】devserver及其配置
qq_42425551的博客
03-08 4万+
一、devserver背景介绍 每次改代码都需要重新部署, 或者只改变修改代码行的效果 所以出现了devserver本地服务 为了完成自动编译，webpack提供了几种可选的模式 方式一：webpack watch mode 实现方法一： 在导出的配置中，添加watch:true 实现方法二： 在启动webpack的命令中，添加–watch的标识 方式二：webpack-dev-server(常用) 二、webpack-dev-server 上面的方式可以监听到文件的变化，但是事实上它本身没有自动刷新浏
超详细Vue Devtools的下载和安装——Vue的调试工具
热门推荐
沐小侠
01-11 5万+
在使用 Vue 时，我们推荐在浏览器上安装 Vue Devtools。vue-devtools是一款基于Chrome浏览器的扩展，用于调试Vue应用。 下载 Github下载地址：https://github.com/vuejs/vue-devtools/tree/v5.1.1 解压下载的文件，在这里解压到D:/Vue下。 在命令行中切换到解压好的vue-devtools-5.1.1目录，使用cnpm install命令进行依赖安装。 依赖包下载完后执行npm run build,编译打包成功后会
vue dev
gengyan_99的专栏
02-12 294
vue 1支持history模式：nginx修改配置：conf/nginx.conf 的pushState
Vue项目分包打包配置（包含dev)全过程
weixin_41884808的博客
03-24 4159
Vue项目手把手教你如何分包
Chrome上的Vue DevTools：Vue开发者的得力助手
最新发布
2201_75568026的博客
04-10 311
Vue DevTools是Vue.js官方提供的一个强大插件，专为Chrome浏览器设计，用于帮助开发者调试Vue应用。它提供了状态管理、组件检查、事件监听等功能，极大地提升了Vue开发的效率和体验。本文将介绍Vue DevTools的安装过程、主要功能以及如何在实际开发中使用它来优化Vue应用的调试和性能分析。
Vue前端项目部署IIS的实现
01-09
需要将自己做的项目安装到他们的笔记本上面去，作为一个销售人员来说，他不会知道例如vue中的npm run dev/serve等命令，电脑中也没有相应的运行环境，这时候就需要用到windows本身自带的IIS服务，将本地开发的项目放...
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。 vue-cli@3 ...这里需要注意的是 dev 环境下不需
vue+node+webpack环境搭建教程
11-27
一、环境搭建 1.1、去官网安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html ) 注意node的版本，只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错。推荐最新版本. 下载...
vue配置dev、test、pro环境，实现分环境打包
weixin_46192027的博客
08-24 5535
vue配置dev、test、pro环境，实现分环境打包 使用vue-cli开发项目时，默认自带的环境有development（开发环境）、production（生产环境），在最近开发的一个项目中，后端是由.net和java共同开发的，为了适应和提高多环境多域名的打包配置效率，前端需要分环境配置不同的打包命令；下面就来讲讲如何配置test环境，实现测试环境的一键打包命令：npm run test。 1、package.json文件中新增命令行脚本test命令,并指向build文件夹下的test.js。 2、
vue-devtools/shells/chrome
12-08
vue-devtools是一款基于Chrome浏览器的插件，用来调试Vue应用，可以大大提高Vue项目开发效率，堪称Vue开发神器！
webpack-dev-server打包并热部署
Dream_T
01-21 487
webpack-dev-server打包并热部署 1.webpack-dev-server开发服务器，它的功能可以实现热加载 并且自动刷新浏览器。 创建一个新的程序目录，这里我们创建webpacktest02目录，将webpack入门程序的代码拷贝进来，并在目录下创 建src目录、dist目录。 将main.js和model01.js拷贝到src目录。 webpack-dev-server的安装与配置 使用 webpack-dev-server需要安装webpack、 webpack-dev-server和
vue-dev配置的血泪史
霜叶的博客
12-15 520
vue-devtools快速配置 1.通常你百度到的教程都是去github克隆–>克隆到本地的文件夹里面–>cd到该文件夹–>npm install–>npm run bulid–>打开浏览器：地址栏输入chrome://extensions/或者直接设置找到扩展程序–>将Chrome文件夹导入 你如果这样做，真的是太甜了。当你安装完系统报错提示的一系列配置后 ...
Vue dev模式启动，出现页面启动两次问题解决方法
qq_43350849的博客
03-11 2669
第一步：找到vue.config.js文件，将devServer下的open，改成false devServer: { port: port, open: false, //原来为true，改为false overlay: { warnings: false, errors: true } 第二步：找到package.json文件，修改scripts下的dev。将对应的脚本启动项 修改为"dev": “vue-cli-service serve --open”。 ...
关于Vue执行命令dev和serve
学习使我快乐_玉祥
08-16 2545
dev是vue-cli2版本的命令，它有它自己的config文件夹，build文件夹 serve是vue-cli3版本的命令，它不需要config，build文件夹，而是以vue.config.js配置文件的形式代替。 因此，如果你创建的是vue-cli3版本的Vue项目，想用dev命令，会涉及到很多的插件不兼容，以及这些配置文件缺失的情况，是个旋涡坑........，既然创建了3版本就用serve即可......。 ...
vue dev环境API代理实现
marylgao技术专栏
03-23 1760
基本描述 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这时候我们就需要使用API代理了。 代码实现 devServer.proxy 可以是一个指向开发环境 API 服务器的字符串： 如下，将所有没有匹配到静态文件的请求代理转发到http://localhost:4000 module.exports = { devServer: { proxy: 'http://localhost:4000' } } 根据不同ap
详解 vue-cli 的打包配置文件代码
Corey
10-15 541
一、前言 　　对于webpack基础不好，node指令不通的童鞋。估计对自己搭建Vue、react脚手架是相当头疼的，有种无从下手的感觉。然而，从头看这2块，耗时太长，而且说实话得练才行，不练练手看不明白。那大多数人就采取折中的方案，修改成熟的脚手架，改成自己想要的样子。这个相对来说难度降低了不少，不过依然会有很多难点不加不明白。所以这里就以Vue的脚手架为例子，将源码加上注释，方便大家加深对项...
vue项目根据不同环境进行设置打包命令
YanHSama的博客
11-16 4733
vue项目根据不同环境设置打包命令
「随手一记」「Vue.js篇」「npm run dev（build）配置开发、测试、生产环境」
一一丁点的博客
06-11 6928
在开发及线上（打包）过程中，经常会遇到根据不同的环境（开发、测试、生产）进行项目的发布。因此本文章主要介绍使用 npm run dev 和 npm run build 进行配置开发、测试、生产环境的切换，这只是切换方式之一（当然还有其他的方式，这里不做介绍）。 本文章介绍的方法有点繁琐，仅供参数，若有哪里写错或不足的地方，请指教。 项目介绍 开发工具：Visual Studio Code 构建脚支架：webpack 项目名称：VUE-DEMO 涉及目录及文件 主要涉及目录及默认文件：b..
linux部署前端vue项目
04-28
以下是在 Linux 环境下部署 Vue.js 前端项目的步骤： 1. 首先需要安装 Node.js 和 npm，可以通过下面的命令来安装： ``` sudo apt-get update sudo apt-get install nodejs sudo apt-get install npm ``` 2. 安装 Vue CLI，用于创建和管理 Vue.js 项目： ``` sudo npm install -g @vue/cli ``` 3. 使用 Vue CLI 创建一个新的项目： ``` vue create my-project ``` 这里的 `my-project` 是项目的名称，可以根据自己的需求修改。 4. 进入项目目录并安装依赖： ``` cd my-project npm install ``` 5. 修改项目配置，将 `package.json` 文件中的 `dev` 命令修改为如下内容： ``` "dev": "vue-cli-service serve --host 0.0.0.0 --port 8080" ``` 这里的 `--host 0.0.0.0` 和 `--port 8080` 分别表示监听所有的IP地址和使用8080端口。 6. 启动项目： ``` npm run dev ``` 此时，Vue.js 项目已经成功运行在 Linux 环境下了。 注意事项： 1. 如果需要在生产环境中部署，需要使用 `npm run build` 命令构建生产环境的代码。 2. 如果遇到权限问题，可以使用 `sudo` 命令运行以上命令。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RachelHwang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值