vue-cli使用 npm run build打包后流程

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

#vue.js #nginx

本文介绍了使用vue-cli进行npm run build打包项目的过程，解决构建后需放在HTTP服务器的问题，以及如何配置和启动Nginx服务器进行项目预览。通过修改assetsPublicPath为'./'，然后使用nginx启动并访问http://localhost:8089查看效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目前，使用vue-cli脚手架写了一个前端项目，之前一直是使用npm run dev 在8080端口上进行本地调试。突然想使用npm run build进行上线打包，试试能否成功看到我的项目效果。

1. npm run build命令。

在这里插入图片描述
**

2.一开始运行npm run build 命令时，有这么一段提示：

**
在这里插入图片描述
这段话的意思就是说：

构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。

到项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”即可，就在前面加个点就可以了
在这里插入图片描述

3.现在再重新打包一次 npm run build，刷新你的页面，应该就可以看到啦

如果index.html页面还是空白说明你还没在电脑上安装服务器，

最低0.47元/天 解锁文章

200万优质内容无限畅学
npm run dev&build的流程梳理
Wion Wan
10-11 8205
Webpack 核心理念 entry 一个可执行模块或库的入口文件。 Module，模块，在Webpack中一切皆模块，一个模块即为一个文件。Webpack会从Entry开始递归找出所有的依赖模块。 chunk 多个文件组成的一个代码块，例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制。 loader 文件转换器，例如把es6转换为es5，scss转...
npm run build 打包 之后怎么用_一个npm包的自述
weixin_39786617的博客
11-27 978
自我介绍我叫 react-jinke-music-player, 是一个 npm 包, 叫我 jk 就好. 我名下有三套房产, 一套是 github, 一套是 npm, 还有一套是 packages, 但买来就没住进去过, 没办法, 谁叫我这么有钱呢! 平时请了个管家 microsoft 帮我打理, 自己平时很少过问.README为了防止老年痴呆, 我给自己写了个使用说明书, 叫 README.m...
NPM 组件你应该知道的事
weixin_46961967的博客
09-24 408
开发一个 npm 组件， 你是否了解需要对外导出什么格式的代码？如何让 npm 组件体积尽可能小？整篇文章按照如下目录进行讲解：为何需要打包组件打包输出格式如何打包 esm 模式代码（感...
npm run build 前端生成生产环境代码的核心命令
最新发布
学习代码
07-11 697
核心作用：将开发代码转化为高性能、可部署的生产环境静态资源。关键配置：在的scripts中定义命令，支持自定义脚本或框架专属指令。最佳实践：构建前确保依赖完整、测试通过；生产环境使用build:prod极致优化。部署前务必通过本地验证构建结果。
vue build 相对路径 如何变成绝对路径_vue项目打包步骤
weixin_39547298的博客
12-12 1776
vue项目打包一、终端运行命令 npm run build二、打包成功的标志与项目的改变，如下图：3、点击index.html，通过浏览器运行，出现以下报错，如图：四、那么应该如何修改呢？具体步骤如下：1、查看package.js文件的scripts命令2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl...
npm run serve/build 背后的真实操作
热门推荐
奔跑的痕迹的博客
02-28 1万+
vue CLI 用起来的确很舒服，方便省事，但他经过层层封装很难明白，执行完那个npm run serve/build 后他都干了些什么，甚至不知道整个项目是怎么跑起来的，今天自己抽时间就去瞅瞅,为加深记录特此记录记录 文章目录一、探寻npm run 背后的真实操作1、看看 npm run serve2、仿造一个serve2-1. 创建测试文件夹2-2. 在 node_modules\.b...
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
在生产环境下，我们通常会使用npm run build命令进行代码的打包，以优化性能、压缩文件等。然而，在完成打包后，经常遇到在本地无法打开打包后的应用文件的问题。这通常是因为Vue-cli默认设置的静态文件服务路径问题...
基于vue-cli npm run build之后vendor.js文件过大的解决方法
10-17
当使用vue-cli进行项目构建（npm run build）后，如果发现生成的vendor.js文件体积过大，这将直接影响到首屏加载时间，降低用户体验。为了解决这个问题，可以采取以下方法。 首先，了解问题的本质。vue-cli的npm ...
react项目npm run build打包后怎么运行
lijunfeng513的专栏
04-02 2972
live-server插件可以简单创建一个本地服务，执行以下命令全局安装live-server插件。打包成功后文件夹中会多出一个 build 文件，该文件就是打包好的项目！打开浏览器，输入localhost:8080 就可以预览了。后面需要把build的项目配置到apache服务器。安装完成就可以在终端启动打包好的build项目了。1、首先我们全局安装live-server插件。方式一：使用live-server插件。2、在build文件夹终端输入。此时，打开浏览器地址栏输入 “一、react项目的打包。
npm run build 打包后，如何运行在本地查看效果（Apache服务）
liubangbo的专栏
02-23 1024
文章转自：https://www.cnblogs.com/qiu-Ann/p/7477593.html 目前，使用vue-cli脚手架写了一个前端项目，之前一直是使用npm run dev 在8080端口上进行本地调试。项目已经进行一半了，今天有时间突然想使用npm run build进行上线打包，试试能否成功看到我的项目效果。一开始是毫无头绪，什么都不懂，直接是就在命令行上敲下：npm ru...
npm run build 打包后，如何运行在本地查看效果（Nginx服务）
CWW2016的博客
11-21 613
这段时间，研究了一下vue 打包的很慢的问题。但是当我 npm run build 打包后，在本地查看效果的时候，活生生被我老大鄙视了，因为我打开了XAMPP。他说：你怎么不用Nginx啊？用这个一堆的路径问题！！！！！！ 然后我就去研究了Nginx 。。。我原谅我老大了。 一.初识nginx Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMA...
npm run build 打包这些玩意
01-08
npm run build 打包这些玩意 打包上传项目是必备的，会遇到一些问题 打包前要配置的东西： config文件夹下的index.js 中的文件中的 assetsPublicPath ：…/改为./ 不然的话会是空白页， build/util.js文件下在 ‘vue-style-loader’ 之后加一行：publicPath: …/…/ 不然的话会有图片显示不出来，字体不能正常使用 vue+element-ui样式发生了变化 main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可
vue-cli 脚手架执行npm run build 执行出错的问题
heartOfblack 离开了电脑，我不希望我还有病
04-26 5153
以下是打包的时候报错的地方。执行出错后，CSS都没有打包成功，加粗内容为重要内容 Asset Size Chunks Chunk Names static/js/app.83b1ad767b13508e5ebd.js 117 kB 0 [emitted] a
npm run build执行顺序
qq_36336872的博客
11-18 1925
1 package.json中命令行中执行index.js里里面buildallfunc函数 2 PROCESS是node环境全局变量 3 执行相关命令，path是node内部相关模块，可拼接路径 —dirname是全局变量路径 4 读取json文件，用到fs模块 5 进入buildFuncmodel配置 6 在runcommand中执行node的child_process.exec进行打包 7 压缩 在packageZip中用const archiver...
在react项目中 通过npm run build 打包后怎么运行浏览
Carrycjava的博客
10-10 3871
然后，打开浏览器地址栏输入“http://localhost”，可以看到“it works”内容页面。即可访问网页，默认监听的是8080端口号，打开浏览器输入 localhost:8080。打包完成后，文件夹中会出现一个build文件，此文件为打包好的项目文件。最后，需要把打包好的项目文件配置到 apache服务器则可以访问。方法二：使用Mac电脑自带的 apache服务器。2、终端进入build文件目录下输入。1、先在终端的全局安装此插件依赖。如何运行打包后的项目？1、输入命令进入此服务。
vue项目npm run build 打包之后如何在本地访问
骨子里的偏爱
04-26 2310
vue项目npm run build 打包之后如何在本地访问
利用@vue/cli创建一个新项目，但在npm run serve或build时报错
Yasha_niu的博客
08-31 1224
利用@vue/cli创建一个新项目，但在npm run serve或build时报错，解决办法
Vue-cli3和Vue-cli4打包 npm run build 路径错误解决办法(亲测管用)
wzg0817的博客
07-29 2112
– Vue-cli3打包 npm run build 路径错误解决办法 我们用vue-cli搭建的项目执行npm build后本地打开页面空白，如何才能查看npm run build之后的结果呢。 我们先看一下提示信息： Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 这段话的意思就是说：构建文件务必放在一个HTTP服务器。直接打开i.
C:\Users\admin\geeyoukindergarten\geeyoou-ui>npm run Scripts available in geeyoou@3.8.1 via `npm run-script`: dev vue-cli-service serve build:prod vue-cli-service build build:stage vue-cli-service build --mode staging preview node build/index.js --preview lint eslint --ext .js,.vue src
07-13
您好！根据提供的信息，这些是在geeyoou项目中可用的npm脚本命令： - `npm run dev`：用于启动开发服务器，运行`vue-cli-service serve`命令。 - `npm run build:prod`：用于构建生产环境的项目，运行`vue-cli-service build`命令。 - `npm run build:stage`：用于构建测试环境的项目，运行`vue-cli-service build --mode staging`命令。 - `npm run preview`：用于预览构建后的项目，运行`node build/index.js --preview`命令。 - `npm run lint`：用于运行eslint检查代码规范，运行`eslint --ext .js,.vue src`命令。 您可以通过在项目根目录下运行这些命令来执行相应的操作。例如，使用命令`npm run dev`来启动开发服务器。请确保在执行这些命令之前，已经安装了必要的依赖项（使用`npm install`命令）。 希望这可以帮助到您！如果您有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值