vue打包后的dist部署

时间: 2023-09-26 10:12:46 浏览: 102

浅谈vue项目如何打包扔向服务器

Vue 项目打包上传服务器详解本篇文章主要介绍了 Vue 项目如何打包上传服务器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。 Vue 项目打包在 Vue 项目中，当我们将项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 Vue-cli（simple）脚手架，所以就讲一下如何将项目进行打包，并放到 Tomcat 上。如果是 Vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。问题描述期间遇到的问题有哪些： 1. 打包后将 dist 文件夹和 index.html 放到 Tomcat，在浏览器中访问时，出现空白页，F12 提示 404。 2. 打包好的静态资源均是绝对路径，无法引入进项目，也是 404。解决方法 1. 项目目录结构项目目录结构这是打包后的，所以有 dist 文件夹，打包方式：npm run build。 2. webpack.config.js 这里只是一小部分，因为这边最关键的就是 publicPath，下面会提，这边可以解决静态资源 404 无法引入的问题。 3. npm run build 打包后的文件 npm run build 打包后生成一个 dist 文件夹，这里面的目录：我对 Webpack 打包工具的原理不是很清楚，所以文件夹应该生成什么不是了解。我这边是这样子的。主要是一个主要的 build.js，因为我们的 index.html 引入的就是这个 js 文件。还有一些图片文件和 ElementUI 生成的 ttf 和 woff。 4. 如何放到服务器中接下来就是需要将生成的 dist 文件夹和 index.html 文件放到服务器中，只需要这两个。首先我将这两个文件放在同一个文件夹中，我命名为 gas（随意）。然后将文件夹放到 Tomcat 的 webapps 文件夹目录下：解决空白页和静态资源无法引入的问题 1. 首先空白页的问题，可以重 F12 中看出来都是绝对路径的原因，而我们打包后，应该的引入路径是相对路径，这时我们需要的是修改 index.html 页面。看一下没改之前的：看我 /dist/build.js 引用的是绝对路径，这就导致了在 Tomcat 去访问 index.html 页面时，报 404。我们需要将路径变成相对路径 ./dist/build/。多一个点，很关键。好了到这里应该主页面可以显示了。 2. 解决静态资源失效的问题这就需要修改我们的 webpack.config.js 中的 publicPath 了，默认的 Vue-cli 脚手架环境搭建好后，publicPath 是这样的：可以看到我们的路径是：/dist/。所以这时候我们如果打开页面，静态资源的路径都会是这样子的，并且报错 404：http://10.0.0.181:8088/dist/bg.png?fe9b889cea51978538ce352593be0573显然可以看出和我们想要的路径不一致，上面我贴出来的在 Tomcat 的文件目录中我将 dist 和 index.html 都放进了一个 gas 的文件夹中。所以正确的路径应该是这样的：http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573看出区别了吗！解决：所以我需要改变一下 webpack.config.js 中的输出路径 publicPath: /gas/dist/。将最外层的文件夹路径加进去，这样就可以将静态资源引入进项目了。 index.html 页面中的资源失效问题原因还是路径的地址不对：妥协的解决方法是：将自己引用的资源手动放到打包出来的 dist 文件夹内，然后在 index.html 中按照 dist 的相对路径进行引用。代码中的 icon.ico 就是我手动将 icon 图标放到 dist 文件夹中，然后按照对应的引用路径进行引用。其他的 css 和 js 引用一样。待解决的问题 1. 在我的项目中，使用了 ElementUI 框架，、本篇文章主要介绍了 Vue 项目如何打包上传服务器，解决了空白页和静态资源无法引入的问题，并且提供了一些有用的解决方法，希望对大家有所帮助。

1. 将打包后的dist文件夹上传至服务器的目标路径，可以使用FTP或者SCP等方式上传。 2. 在服务器中安装Web服务器，如Nginx或Apache等。 3. 配置Web服务器，将dist文件夹设置为Web服务器的根目录，并设置访问规则。 4. 启动Web服务器，访问服务器的IP地址或域名，在浏览器中输入对应的URL，即可访问Vue应用程序。 5. 如果需要使用HTTPS协议，还需要安装SSL证书并配置Web服务器。

阅读全文

vue打包后的dist部署

相关推荐

Vue webapp转原生APP：HBulider打包教程

Vue项目使用HBuilder打包成APP详细教程

vue打包后的dist部署nginx

vue打包dist文件 部署到服务器上样式移位vu

vue 打包成dist

vue 打包后的dist文件部署在iis上线

vue 打包后的文件部署到express服务器上的方法

vue打包部署nginx 配置

vue打包后如何部署在服务器

把前端VUE打包成dist有什么好处

vue 命令 打包dist

vue打包后部署nginx

怎么将vue打包好的部署到服务器

vue2打包后的文件dist如何部署到linux上

vue打包放到java中启动_Springboot+Vue打包部署总结

vue3打包成dist文件夹之后后端请求报404错误解决方法

vue打包后怎么运行

vue打包部署到nginx上流程 windows

vue打包后如何试运行

最新推荐

vue打包后显示空白正确处理方法

修改Vue打包后的默认文件名操作

Vue打包后出现一些map文件的解决方法

Vue+Koa2 打包后进行线上部署的教程详解

Springboot项目与vue项目整合打包的实现方式

Raspberry Pi OpenCL驱动程序安装与QEMU仿真指南

管理建模和仿真的文件

Fluent UDF实战攻略：案例分析与高效代码编写

如何使用DPDK技术在云数据中心中实现高效率的流量监控与网络安全分析？

Apache RocketMQ Go客户端：全面支持与消息处理功能

vue打包dist文件部署到服务器上样式移位vu

vue 命令打包dist