广告
返回顶部
首页 > 资讯 > 前端开发 > html >vuejs项目如何打包
  • 188
分享到

vuejs项目如何打包

2024-04-02 19:04:59 188人浏览 薄情痞子
摘要

这篇文章主要介绍Vuejs项目如何打包,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! vuejs项目打包的方法:1、打开config目录下的“index.

这篇文章主要介绍Vuejs项目如何打包,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

vuejs项目打包的方法:1、打开config目录下的“index.js”文件,修改build下的assetsPublicPath和productionSourceMap选项;2、打开cmd窗口,执行“npm run build”命令即可。

教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

vuejs项目打包的步骤:

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

vuejs项目如何打包

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

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

vuejs项目如何打包

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

vuejs项目如何打包

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

以上是“vuejs项目如何打包”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网html频道!

--结束END--

本文标题: vuejs项目如何打包

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

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

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

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

下载Word文档
猜你喜欢
  • vuejs项目如何打包
    这篇文章主要介绍vuejs项目如何打包,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! vuejs项目打包的方法:1、打开config目录下的“index....
    99+
    2022-10-19
  • pycharm如何打包项目
    pycharm通过配置项目设置、创建虚拟环境、安装依赖库、配置运行/调试配置、打包项目和分发项目等步骤打包项目。详细介绍:1、配置项目设置,通过选择"File"菜单,然后点击"Settings"来打开项目设置;2、创建虚拟环境,在项目设置中...
    99+
    2023-12-11
    pycharm
  • 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
  • vuejs项目打包之后首屏加载优化的示例分析
    这篇文章给大家分享的是有关vuejs项目打包之后首屏加载优化的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一:使用CDN资源我们在打包时,会将package.json里...
    99+
    2022-10-19
  • 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
  • vue.js项目如何打包上线
    这篇文章主要介绍了vue.js项目如何打包上线,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。首先需要修改一下配置文件再打包,很多人都是遇到过...
    99+
    2022-10-19
  • 【Python】Python项目打包发布(四)(基于Nuitka打包PySide6项目)
    Python项目打包发布汇总 【Python】Python项目打包发布(一)(基于Pyinstaller打包多目录项目) 【Python】Python项目打包发布(二)(基于Pyinstaller打包...
    99+
    2023-10-06
    python linux 开发语言
  • webpack如何创建项目并打包
    这篇文章主要介绍“webpack如何创建项目并打包”,在日常操作中,相信很多人在webpack如何创建项目并打包问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”webpack如何创建项目并打包”的疑惑有所帮助!...
    99+
    2023-07-05
  • webpack如何打包node.js后端项目
    这篇文章主要为大家展示了“webpack如何打包node.js后端项目”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“webpack如何打包node.js后端项目...
    99+
    2022-10-19
  • 如何使用eclipse打包Maven项目
    小编给大家分享一下如何使用eclipse打包Maven项目,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Maven中最重要的是POM文件,其打包也是基于该文件的,...
    99+
    2023-06-29
  • Unix 打包:如何打包包含 ASP 和 LeetCode 代码的项目?
    在软件开发过程中,我们经常需要将代码打包成一个可执行文件或者一个库文件。对于 Unix 操作系统,常用的打包工具是 tar 和 gzip,它们可以将多个文件或者目录打包成一个文件,方便传输和存储。但是对于包含 ASP 和 LeetCode...
    99+
    2023-11-07
    leetcode 打包 unix
  • SpringBoot项目打jar包和war包
    目录 一. SpringBoot项目打war包 二. SpringBoot项目打jar包 背景:使用Idea编辑器 一. SpringBoot项目打war包 步骤: 在pom.xml文件中的标签,使用标签,去给生成的war包起名字。若是没...
    99+
    2023-08-31
    java SpringBoot打包 打jar包 打war包
  • 【python】项目打包发布
    概览 这里主要收集python项目的打包、发布和部署的常用方法,只是入门级别,深入的流程还是以官方文档为准(链接每节都已经给出)。 distutils,setuptools,pip,virtualenv 官网资料(Python Pack...
    99+
    2023-01-31
    项目 python
  • Maven项目怎么打包
    这篇文章主要介绍了Maven项目怎么打包的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Maven项目怎么打包文章都会有所收获,下面我们一起来看看吧。使用maven,制作jar文...
    99+
    2022-10-19
  • pycharm怎么打包项目
    在PyCharm中打包项目可以通过以下步骤进行:1. 打开PyCharm,选择要打包的项目。2. 在菜单栏中选择“File” -> ...
    99+
    2023-08-18
    pycharm
  • python项目如何打包成exe和安装包
    这篇文章主要介绍了python项目如何打包成exe和安装包的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇python项目如何打包成exe和安装包文章都会有所收获,下面我们一起来看看吧。一.打包Flask项目1自...
    99+
    2023-07-05
  • Go Path 打包实战:如何快速打包你的项目?
    Go语言是一种快速、简洁、安全的编程语言,广泛用于云计算、Web应用、网络服务、数据存储等领域。如果你是一名Go语言开发者,那么你一定需要将你的项目打包成可执行文件或库,以便于分发和部署。本文将介绍如何使用Go Path打包你的项目,实现...
    99+
    2023-08-24
    path 教程 打包
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作