vue打包部署到服务器上

最新推荐文章于 2024-05-15 00:35:49 发布
最新推荐文章于 2024-05-15 00:35:49 发布
阅读量1.6k 收藏 1
点赞数 2
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36926807/article/details/88623427
版权

1.首先要改一下配置文件
找到根目录下的config/index.js文件 

修改assetsPublicPath: './',

productionSourceMap: false

如图：

2-运行npm run build

然后在项目路径中找到打包后的文件，在项目文件的dist文件夹下面的static和index.html就是打包后的文件，把static和index.html拷贝到你要放的服务器文件夹下面

如图：

然后访问index.html就可以了

 

注意事项：打包后可能会出现静态资源文件路径不对（图片，字体等）

需要进入到vue项目中的build/webpack.base.conf.js里边修改

加大limit就可以了

优睿
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在本篇文章里小编给大家整理了关于Vue3项目打包后部署到服务器 请求不到后台接口解决方法，有需要的朋友们可以参考下。
vue打包放到服务器的问题
shaonian1996
06-26 1291
1 打包后放到服务器无法加载资源文件 一般的话vue打包后放到public目录下 修改前端代码：config/index.js ,assetsPublicPath改成 : './' build: { index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: pat...
Vue项目打包部署总结
最新发布
2301_79098873的博客
05-15 1002
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue项目打包发布到服务器
hellojoy的博客
04-10 1756
1，tomcat： tomcat下部署静态文件。一般情况下，网站也做到静态文件的分离。静态文件这个时候就需要部署到特定的服务器上了。一般会部署到nginx上。如果做测试的话，也会部署到tomcat上。 部署的方法为： 在tomcat的conf目录下的server.xml文件中做相应的配置即可。 1.在<host></host>中添加配置。 <Context ...
webpack打包vue项目之后怎么启动&注意事项
lotte
08-16 1万+
前端代码没有服务器可以部署到 express 服务器上运行 1.执行：npm run build 打包后生成dist文件夹 2. 安装express-generator生成器 执行  $ npm install express-generator -g  进行安装 3. 创建一个express项目 执行  $ express expressDemo （expressDemo是项目名...
手把手教你如何把vue项目打包后部署到服务器（小白教程）
Orange71234的博客
06-21 1万+
（5）输入用户名密码登录出现如下页面 ，点击左侧网站-->添加站点-->输入域名-->根目录地址会 自动生成-->点击提交-->站点创建成功。1.vscode打开你的vue项目-- >点终端 -- >输入npm run build 按回车进行打包；3.下载安装好软件后双击打开，选择SSH连接，填写如下信息，最后点击确定。（7）点击上传，按照下图方式上传之前打包好的dist文件夹下的内容，(2)查看服务器是否安装宝塔，如安装则出现宝塔面板命令，(3)输入14，查看并复制外网面板地址以及用户名，密码。
Vue项目打包部署到iis服务器的配置方法
10-16
主要介绍了Vue项目打包部署到iis服务器的配置方法，文中通过代码示例给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue项目打包部署到服务器的方法示例
10-18
主要介绍了vue项目打包部署到服务器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目webpack打包部署到服务器的实例详解
12-12
这篇博文主要说的就是我今天遇到的问题，而且在经过我的询问，好多人在打包部署的时候都遇到了一些问题，下面就来说下，如何将Vue项目放置在服务器上，这里以Tomcat为例。 必须要配置的就是/config/index.js 在vue-...
Vue 项目部署到服务器的问题解决方法
08-28
很多开发者在使用 Vue-cli 安装的脚手架开发时，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404 等问题。 前端配置 在部署 Vue ...
Vue项目打包部署
qq_40259528的博客
07-20 2万+
vue项目部署，使用的是linux centors nginx.遇见的问题及解决方案
Vue项目打包部署到服务器（Linux）
真的以为的博客
10-29 6464
一、打包（build） npm run build也可以 打包完成后项目路径会多出一个dist文件夹 到这里本地的打包完成了 然后到服务器 二、服务器配置（nginx） 注：如果已经有nginx环境了的话直接到第6小步 1、查看gcc版本 gcc -v 没有的话安装 yum -y install gcc 2、pcre、pcre-devel安装 pcre是一个perl库，包括perl兼容的正则表达式库，nginx的http模块使用pcre来解析正则表达式，所以需要安装pcre库。 yum install
vue项目部署到服务器上
web18536560468的博客
09-10 1万+
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
前端框架Vue（12）——如何将 vue-cli 项目打包压缩（npm run build）后放到服务器
ALLEN的博客
07-20 2万+
当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。   如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线  先来描述一下期间遇到的问题有哪些：1、打包后将 dist 文件夹和 index.html
vue前端项目打包并且在服务器上部署过程
mao_mao37的博客
04-16 1万+
两篇推荐博客： https://blog.csdn.net/qq_33661804/article/details/85340697 https://blog.csdn.net/kaola_l/article/details/80497490 https://blog.csdn.net/qq_32340877/article/details/79105565 https://blog.cs...
Vue项目webpack打包部署到服务器
热门推荐
Dear_Mr的博客
06-05 7万+
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题，而且在经过我的询问，好多人在打包部署的时候都遇到了一些问题，下面就来说下，如何将Vue项目放置在服务器上，这里以Tomcat为例。必须要配置的就是/config/index.js在vue-cli webpack的模板下的/config/index.js，我们可以看到assetsPublicPath这个键，并且这个东西还出现
关于vue-cli + webpack打包给后台,部署上线
GossipHHH的博客
12-08 6056
1.路径问题 (1).脚手架 + webpack打包必然是npm run build,但是后台用tomcat部署上线的时候,可能会衍生出一点问题,比如,路径问题(这里的路径问题,是因为在项目中,我们使用了绝对路径,这里必须要用相对路径,但是打包后,还是会报错,说是找不到assets文件夹下的各种资源,包括images,css,js,是因为,当初在全局引用的时候,写在了index.html中,安全
vue脚手架中webpack的打包原理，vue脚手架的webpack是如何打包的?
jiang7701037的博客
03-08 1万+
vue脚手架写完代码后，要打包部署（打包）到web服务器上。 1、运行命令 npm run build。就完了，一步搞定。 下面说一下vue脚手架中webpack的打包原理： 1、针对静态资源： 很多人会把静态资源一部分存放在src/assets目录下，一部分存放在static目录下，我建议所有的静态资源都存放在src/assets下。 在w...
vue项目打包部署——nginx代理访问
y562363753的博客
07-23 9428
1. 首先vue项目打包（我使用的是vscode工具） 这是我新建的一个项目工程： 新建或修改原有工程中的vue.config.js文件，增加或修改以下内容： 主要是publicPath 与outputDir 两项配置，若项目中有baseUrl,替换为publicPath （baseUrl, vue cli 3.3 已弃用） module.exports = { // 基本路径 publicP...
vue3打包部署到服务器
08-22
要将Vue 3项目打包部署到服务器，您可以按照以下步骤进行操作： 1. 在Vue 3项目的根目录下，打开终端。 2. 运行以下命令安装项目所需的依赖： ``` npm install ``` 3. 接下来，运行以下命令进行项目的打包： ``...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值