vue项目打包部署

最新推荐文章于 2024-08-19 12:39:10 发布
最新推荐文章于 2024-08-19 12:39:10 发布
阅读量351 收藏
点赞数
分类专栏： VUE 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45843676/article/details/123133201
版权
本文介绍了如何在项目目录下通过CMD运行npm run build命令构建项目，并将dist文件夹重命名为static移至新建的server文件夹中。然后通过npm init创建新的项目，安装express并配置静态路径。在server.js中设置静态文件路径并监听5000端口。最后，运行node server启动服务器，访问localhost:5000即可查看部署内容。
摘要由CSDN通过智能技术生成

首先在项目目录第一层打开cmd

在这里插入图片描述

这里我的项目文件名称是untitled01

接着运行命令npm run build

在这里插入图片描述

运行成功如下

在这里插入图片描述

项目里面有个dist文件夹

在桌面上建立个文件夹server，将它作为vscode工作区

在server之上打开终端

在这里插入图片描述

运行npm init

提示package name: (server)

输入一个英文项目名</

最低0.47元/天 解锁文章
修罗_
关注
专栏目录
vue项目打包部署到tomcat（详细）
蜗牛~~
06-21 5880
hash路由模式打包部署到tomcat 1、修改config/index.js文件下的assetsPublicPath为'./' 2、修改router文件夹下index.js添加 base: ‘/文件夹名称/’ （例如：yuncheng，可以自己随意设置） 3、在tomcat下webapps里面新建一个文件夹，名称是之前配置时设置的名称（yuncheng） 4、将自己打包的dist文件夹的内容放进tomcat下的webapps的yuncheng文件夹下 注意：2.3.4可以简化为：在...
Vue项目打包部署总结
携手天下
01-14 6963
本文发布于我的个人网站：http://wintc.top/article/29，转载请注明。 使用Vue做前后端分离项目时，通常前端是单独部署，用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方...
Vue项目的打包部署
最新发布
程小白的博客
08-19 369
一.当前开发模式 前后端分离的开发模式 前端和后端开发人员开发好后，要将前端项目和后端项目分别打包部署在前端服务器和后端服务器上。而当前最为流行的前端服务器为nginx。 二.打包 这样就完成了打包，打包完成后只需要将dist下面的资源部署在服务器上。 打包后的文件 三.部署 官网上下载 下载稳定版。 解压安装在一个没有中文和空格的目录下。 安装完成后打开所在文件夹，其文件夹功能介绍如下： 我们的项目文件（dist中的文件，为静态资源）就要拷贝到html文
Vue项目的打包\部署\优化
Crazyhao的博客
12-15 2978
Vue cli 项目打包\部署\优化
Vue项目打包部署
热门推荐
qq_40259528的博客
07-20 2万+
vue项目部署，使用的是linux centors nginx.遇见的问题及解决方案
Vue项目打包部署到iis服务器的配置方法
10-16
Vue项目开发完成后，需要通过打包工具如Webpack将其打包成静态资源，以便部署到服务器上。IIS (Internet Information Services) 是Windows系统上的一种Web服务器。在将Vue项目部署到IIS服务器上时，会遇到一些配置...
vue项目打包部署到服务器的方法示例
10-18
Vue项目通常会经历开发、构建、部署这几个步骤，而项目打包部署到服务器则是将开发好的Vue项目移至生产环境的重要环节。本文详细介绍了将Vue项目打包并部署到服务器上的具体方法和步骤，同时也会涉及到一些在部署...
vue 项目打包部署
实习打字猿的博客
04-18 225
# 建议先走vue优化三步曲 vue 首屏优化加载（一）（懒加载） vue 首屏优化加载（二）（Gzip压缩） vue 首屏优化加载（三）（CND引用） # 找到根目录下 config 文件夹下的 index.js 把 assetsPublicPath: '/' 修改成 assetsPublicPath: './' build: { // Template for index....
vue项目打包之开发环境和部署环境的实现
11-21
项目开发阶段和生产环境可能不一样 如前端在开发阶段，接口可能是自己使用 node.js 搭建的服务器，API 返回的也都是假数据，等后台接口开发好后，再切换成后台提供的接口，等测试没有问题，服务端上线后，又要改成正式的接口 手动改动接口，既繁琐又容易出错（当然，区别还不止这些） 优雅的解决方案是，分别使用两个入口文件，一个用于开发环境打包，一个用于生产环境打包 具体来说，分为下面几个步骤 1、创建入口文件 在 src 目录下新建 prod_env.js 和 dev.env.js 将main.js 中代码分别拷贝到这两个文件中，并删除 main.js 2、配置打包时的入口文件 项目根目录下新建
Vue之项目打包部署到服务器
ChenXj0.0的博客
09-18 2149
第一步：在build/utils/webpack.prod.conf.js 中的output中添加一条 publicPath:’./’ 在build/utils/webpack.prod.conf.js 中的output中添加一条 publicPath:’./' 如果有则继续往下走，come on！！！ 没有的话看第二步 Vue-cli3.0文件配置 Vue-cli3.0没有config文件，需要自己在根目录新建一个vue.config.js文件。具体内容如下： const webpac
vue项目打包布署
m0_67403013的博客
06-18 4620
我们使用Vue做项目时，基本都是前后端分离的，所以项目布署有时是前后单独部署。因此前端开发人员很有必要熟悉一下项目部署的流程。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题。一般我们在布署时，服务器已经开通好了，我们进入服务器配置就好了。一般而言，nginx后端会安装好。我们在此熟悉一下安装过程 启动后，正常情况下，直接访问`http://服务器ip`或`http://域名`。如
前端vue项目的打包及部署
tlovet_1314的博客
05-21 1584
前端vue项目的打包及部署 打包步骤执行以下命令 npm run build 这时我们就可以把生成的dist文件的路径保存下，随后需要配置到nginx的conf文件中的root后面 nginx配置文件的修改 server { listen 8081; # 1.项目端口 server_name localhost; # 2.域名/项目地址 #charset koi8-r; #access_log logs
Vue项目打包部署教程（Nginx）
x1339874968的博客
11-25 2526
一、项目打包 1.修改config.js(没有该目录则在根目录下手动创建vue.config.js) module.exports = { publicPath: '/', devServer:{ port:80, // 启动端口 open:true // 启动后是否自动打开网页 } } 2.命令行输入npm run build ，生成项目文件夹dist 二、Nginx安装 1.在/usr/local/下创建文件nginx文件 mkdir /usr
Vue前端项目打包，并部署Vue项目到Linux云服务器上
Smile yourlife
05-23 2639
2.在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号，因为这是在实际的部署当中所以必须要在生成环境下进行项目的部署。在实际当中服务器中可能有多个vue前端项目，此时我们只要单独修该conf文件即可，一个前端项目对应的一个conf文件。在/usr/local/nginx/conf目录下配置nginx.conf文件修改内容。（Vue项目设置了本地代理，部署到Nginx上需要使用反向代理解决生产环境跨域问题）（1） 修改root，（root为项目打包后文件的存放路径。
vue项目打包部署nginx
08-12
要将Vue项目打包部署到Nginx上，你可以按照以下步骤进行操作： 1. 首先，在命令行中使用以下命令将Vue项目进行打包： ``` npm run build ``` 这将生成一个`dist`文件夹，其中包含了打包后的静态文件。 2. 接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

修罗_

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

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

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

打赏作者

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

抵扣说明：

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

余额充值