vue-cli打包后如何运行

最新推荐文章于 2025-06-20 20:07:16 发布
原创 最新推荐文章于 2025-06-20 20:07:16 发布 · 5.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

参看博客：https://blog.youkuaiyun.com/u014054437/article/details/79981307#commentBox

 

执行npm run build进行打包，生成dist文件夹，直接打开dist中的index.html文件将会是一片空白

dist中的文件需要放在服务器上运行，具体的操作参考上面的博客，感谢这位博主啦！！！

 

config/index.js中的assetsPublicPath: '/'，并不需要像网上说的改成assetsPublicPath: './'

express中的3000端口(bin/www文件中设置)

Vue3 & 详解 vue-cli 使用 --target lib 打包的方式
Thinking anywhere anytime.
10-15 7513
目前网上大部分的打包流程都不能满足我的理解和需求，而官方的解释也只说明一半，这次我就干脆将 vite/vue-cli 这两者的打包流程详细梳理下。在 vue-cli 使用打包项目后，默认会提供一个入口（通常是 index.html），然后引入一个 js 入口文件完成页面的渲染。其实 vue-cli 还支持将项目作为一个库的方式来进行打包，这里需要借助命令 ，此命令会将入口文件打包成一个库吗，具体可参考官方解释接下来我会逐步详解如何构建属于自己的库。
vue文件打包后怎么运行
m0_74358570的博客
08-23 588
vue打包、vue打包后在本地运行
vue-cli 项目打包后打开页面空白
小白阿里里的博客
08-26 1万+
关于项目在打包后打开页面空白问题 在我们输入命令 npm run build 打包项目后在项目文件中会多出一个dist文件夹，打包后的文件就在该文件夹中，将里面的文件放在服务器上即可。 我第一次这样操作的时候，打开页面一片空白，调试模式下显示css,js全都是引入错误。 打开config文件夹下的 index.js 找到如下图所示区域： 可以看到 assetsPublicPat...
Vue3 项目打包
最新发布
likuoelie的博客
06-20 1260
Vue3 是一个流行的 JavaScript 框架，用于构建 Web 应用和用户界面。项目打包是将开发环境代码编译为生产环境的静态文件，适合部署到服务器。调研发现，Vue3 项目通常使用 Vite 作为构建工具，替代了传统的 Webpack。打包命令为vite build，生成dist目录。调研中，菜鸟教程、Vite 官方中文文档和 优快云 博客提供了丰富的中文资源，适合初学者和高级开发者。Vite 允许通过自定义打包选项，位于项目根目录。常见配置如下：配置项描述示例base。
vue-cli使用指南
chy-x 的博客
08-28 2735
需要通过this来调用methods中的方法// 加this this . getTaskList();// 加this this . getTaskList();} , }
Vue-Cli搭建Vue项目及使用
2301_78158568的博客
07-16 1224
cli: Command Line 命令行工具，vue-cli就是vue的命令行工具，也称之为脚手架，使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如webpack、Element UI、Element Admin等等。那么要想使用vue-cli命令，需要先安装node.js。node.js提供了前端程序的运行环境，可以把node.js理解成是运行前端程序的服务器。解决方案: 以管理员身份启动idea,打开项目运行。
Vue-cli打包后部署到子目录下的路径问题说明
10-14
完成上述配置后，重新运行 `vue-cli` 的打包命令，生成的静态文件就可以在指定的子目录下正常工作了。这将帮助你的 Vue.js 应用在服务器的二级子目录下运行，同时解决了资源路径的问题。请记住，不同的服务器配置...
vue-cli 打包后提交到线上出现 “Uncaught SyntaxError:Unexpected token” 报错
01-21
前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载. BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/问题2区分) 问题1.导航点击无法正常跳转,console...
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
10-17
主要介绍了vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于vue-cli3打包代码后白屏的解决方案
10-14
在使用Vue CLI 3进行项目开发时，遇到打包后白屏的问题可能是由于多种原因导致的。本文将详细介绍如何解决这个问题，并提供一些相关的补充知识。 首先，白屏现象通常是由于资源加载失败或路由配置不当引起的。当...
解决vue-cli 打包后自定义动画未执行的问题
10-16
在使用Vue CLI进行项目开发并打包后，有时会遇到自定义动画无法执行的问题。这通常是由于打包配置不当导致的。为了解决这个问题，需要对Vue项目的打包配置进行修改。 首先，了解问题的背景非常重要。在Vue项目中，...
vue-cli项目运行流程介绍
CAUC_lin的博客
01-31 926
​ 本文介绍 vue-cli搭建的项目运行流程，基于已经搭建好的基础项目。关于 vue-cli 构建项目的详细流程，可参考博文：https://blog.youkuaiyun.com/CAUC_lin/article/details/135949697项目运行 会加载入口文件 main.js 三、App.vue App.vue 是vue项目的主组件，是页面入口文件 ，所有页面都是在App.vue下进行切换的 四、router 路由 五、Home.vue组件 默认访问的是Home.vue 首页 HelloWo
创建一个VUE Cli工程，安装vue
weixin_70633211的博客
04-15 1776
Vue CLI是Vue.js官方推荐的创建和管理Vue.js项目的工具。通过提供一系列标准化的工具和流程，它帮助开发者提高开发效率，快速构建现代化的web单页面应用。
[VUE] Vue-CLI的安装、使用及环境配置（超详细）
热门推荐
leo的博客
11-20 4万+
Vue-CLI的安装、使用及环境配置的详细步骤（超详细）
Vue----vue-cli
emmmm.....
10-12 1968
文章目录vue-cli1. vue-cli2. 安装 vue-cli2.1 解决 Windows PowerShell 不识别 vue 命令的问题3. 创建项目4. 基于 vue ui 创建 vue 项目步骤1：在终端下运行 vue ui 命令，自动在浏览器中打开创建项目的可视化面板步骤2：在详情页面填写项目名称步骤3：在预设页面选择手动配置项目步骤4：在功能页面勾选需要安装的功能步骤5：在配置页面勾选 vue 的版本和需要的预处理器步骤6：将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、优快云哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
vue-cli webpack 项目打包后如何运行
11-24 3242
vue-cli webpack 创建的项目打包后生成的项目如何运行 1.项目打包 运行 nom run build 项目打包 会形成一个dist文件加，里面是打包之后的东西 在这里进行一下描述 dist 整个文件夹下的东西就是要运行在服务器端的所有东西，之外的任何东西都是本地测试的，不需要部署服务器上 2.如何运行打包后的项目 以express服务器为例 安装express 创建一个文件夹，在文件...
如何在手机上运行vue-cli项目
胡老大的唯一大老婆的博客
05-02 967
一、在控制台查看自己的ip,把http://localhost:8080/换成自己的ip和端口 二、用自己的ip和端口号打开项目，比如我的：http://10.6.209.197:8080/# 三、复制该地址，用草料二维码生成二维码，然后使用手机扫描安装OK。 ...
vue-cli 如何运行
KLW75
01-11 968
npm run dev 执行了什么。 在终端输入 npm run dev 之后 ，最终执行的文件是index.html 所以首先打开 index.html. index.html 文件 理论上运行只会展示空白页面。但是实际上 webpack 在index.html中自动引入了main.js。 所以，当运行 npm run dev时后，会自动的在index.html 页面中引入main.js main.js文件 在main.js中，引入了Vue.js、 App.vue、 router.js 使
vue-cli打包发布
07-27
首先，使用vue-cli创建模板项目，可以通过运行命令`vue init webpack`来初始化项目。在初始化过程中，可以选择是否加载依赖vue-router和是否使用ESLint进行代码规范检查。接下来，可以使用命令`npm run build`或`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值