iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >vue.js项目如何打包上线
  • 868
分享到

vue.js项目如何打包上线

2024-04-02 19:04:59 868人浏览 安东尼
摘要

这篇文章主要介绍了vue.js项目如何打包上线,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。首先需要修改一下配置文件再打包,很多人都是遇到过

这篇文章主要介绍了vue.js项目如何打包上线,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里选项:

vue.js项目如何打包上线

上图中第一个要修改的就是静态文件的路径,打包后静态文件就在当前目录下,所以修改为./

第二个是环境设置为生产环境

修改好后打开cmd运行下面的命令打包即可:

vue.js项目如何打包上线

注意下面的tip,告诉你这个打包后的文件需要放到服务器才能打开,不能直接使用浏览器打开,打包后的文件结构如下:

vue.js项目如何打包上线

这时我们需要使用服务器的方式来访问index.html就可以了。这里可能很多人也会遇到一些问题,比如大家可能在开发的时候使用的proxytable来解决跨域的问题,这里就会没有数据了,这个需要自己通过服务器在解决一下才可以的,proxytable在这里只是为了方便大家开发的跨域解决方案。

感谢你能够认真阅读完这篇文章,希望小编分享的“Vue.js项目如何打包上线”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网VUE频道,更多相关知识等着你来学习!

--结束END--

本文标题: vue.js项目如何打包上线

本文链接: https://www.lsjlt.com/news/78621.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue.js项目如何打包上线
    这篇文章主要介绍了vue.js项目如何打包上线,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。首先需要修改一下配置文件再打包,很多人都是遇到过...
    99+
    2022-10-19
  • vue.js项目怎么打包上线
    这篇文章主要介绍“vue.js项目怎么打包上线”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue.js项目怎么打包上线”文章能帮助大家解决问题。vue.js项目打包上线最近一直坚持每个月写一个小的...
    99+
    2023-06-30
  • vue.js项目打包上线全流程
    目录vue.js项目打包上线这里我简单的列出这个过程vue.js打包之后遇到的坑打包之后没有被渲染出来路由(router)mode:'history',导致页面不能渲...
    99+
    2022-11-13
  • vue项目如何打包发布上线
    这篇文章将为大家详细讲解有关vue项目如何打包发布上线,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、开发环境到生产环境的转变项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发...
    99+
    2023-06-25
  • vue项目打包发布上线的方法步骤
    目录一、开发环境到生产环境的转变二、设置统一的请求路径 三、运行打包命令vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-c...
    99+
    2022-11-12
  • Vue项目上线打包好的文件如何在服务器上部署?
    一、打包Vue项目 1.打开router下的js文件,调成hash模式:mode:'hash'   2.终端输入:npm run build 3.此时项目中会多出一个dist的文件,这个文件就是我们打包出来的项目 二、搭建一个服务器 1.使...
    99+
    2023-09-30
    npm 前端 node.js vue.js
  • vuejs项目如何打包
    这篇文章主要介绍vuejs项目如何打包,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! vuejs项目打包的方法:1、打开config目录下的“index....
    99+
    2022-10-19
  • pycharm如何打包项目
    pycharm通过配置项目设置、创建虚拟环境、安装依赖库、配置运行/调试配置、打包项目和分发项目等步骤打包项目。详细介绍:1、配置项目设置,通过选择"File"菜单,然后点击"Settings"来打开项目设置;2、创建虚拟环境,在项目设置中...
    99+
    2023-12-11
    pycharm
  • 如何在 Windows 上打包 Java 项目并上传至 LeetCode?
    LeetCode 是一个著名的算法学习网站,它提供了丰富的算法题目和在线编程环境。如果你想在 LeetCode 上提交自己的 Java 代码,你需要先将 Java 项目打包成 jar 文件,然后上传至 LeetCode 的在线编程环境。下...
    99+
    2023-08-27
    windows leetcode 打包
  • SpringBoot实现动态配置及项目打包部署上线
    写在前面 🍁个人主页:微枫Micromaple ✨本期专栏:《0到1项目搭建》欢迎订阅学习~ 📌源码获取:GitCode、GitHub、码云Gitee 持续更新...
    99+
    2023-09-04
    spring boot java spring linux 后端
  • electron如何打包vue项目
    这篇文章主要介绍electron如何打包vue项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!创建项目添加electron-builder在项目目录下运行命令:vue add electron-builder2、e...
    99+
    2023-06-29
  • springboot项目如何打包成jar包
    本篇内容主要讲解“springboot项目如何打包成jar包”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“springboot项目如何打包成jar包”吧!一、为什么打包项目开发完毕后会将前后端应...
    99+
    2023-06-30
  • vue-cli项目如何根据线上环境分别打出测试包和生产包
    这篇文章主要介绍了vue-cli项目如何根据线上环境分别打出测试包和生产包,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。最近用vue-cli...
    99+
    2022-10-19
  • 如何在 Unix 上打包包含 ASP 和 LeetCode 代码的项目?
    在 Unix 系统上打包包含 ASP 和 LeetCode 代码的项目可能对一些开发者来说是一项具有挑战性的任务。本文将会探讨如何完成这个任务,包括如何使用 tar 命令打包项目文件,并且将 ASP 和 LeetCode 代码一起打包在一个...
    99+
    2023-11-07
    leetcode 打包 unix
  • IDEA中MAVEN项目如何打包JAR包
    这篇文章主要为大家展示了“IDEA中MAVEN项目如何打包JAR包”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“IDEA中MAVEN项目如何打包JAR包”这篇文章吧。Idea中为一般的非Web项...
    99+
    2023-05-30
    idea maven jar
  • Vue项目如何优化打包
    这篇文章主要为大家展示了“Vue项目如何优化打包”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue项目如何优化打包”这篇文章吧。一、路由懒加载1.为什么需要路由懒加载当刚运行项目的时候,发现刚...
    99+
    2023-06-25
  • webpack+vue-cli项目如何打包
    小编给大家分享一下webpack+vue-cli项目如何打包,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.设置config文...
    99+
    2022-10-19
  • SpringBoot实现动态配置及项目打包部署上线功能
    目录写在前面一、动态配置文件1.1、概述1.2、启动方式1.2.1、jar包启动1.2.2、IDEA启动配置二、项目打包2.1、IDEA打包2.2、Maven命令打包三、项目部署3....
    99+
    2022-11-13
  • maven项目打包上传到私有仓库
    目录1. 背景2. 步骤2.1 修改pom.xml2.2 命令执行2.3 成功后的依赖3. 扩展1. 背景   最近有些自己制作的工具包,需要单独抽取出来之后...
    99+
    2022-11-12
  • 如何解决vue-cli+iview项目打包上线之后图标不显示问题
    这篇文章主要介绍如何解决vue-cli+iview项目打包上线之后图标不显示问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!做vue项目使用的iviewUI库,打包上线之后发现ic...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作