vue项目打包步骤

你的名字 2021-09-15 14:50 526阅读 0赞

# vue项目打包 #

**一、终端运行命令 npm run build**

**二、打包成功的标志与项目的改变，如下图：**

![70][]

![70 1][]

**3、点击index.html，通过浏览器运行，出现以下报错，如图：**

![70 2][]

**四、那么应该如何修改呢？**  
具体步骤如下：  
1、查看package.js文件的scripts命令  
2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件  
3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。  
4、终端运行 npm run build 即可。

此时点击index.html，通过浏览器运行便，会发现动态绑定的static的图片找不到，故static必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。

**五、温馨提示**

**更多博文，请关注：xssy5431 【小拾岁月】**

**扫码：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

[70]: /images/20210802/7d649a1aadde47c9a50d5eae483abe67.png
[70 1]: /images/20210802/055a925e2b6947ed971201515d4ada36.png
[70 2]: /images/20210802/021458abd41a4be2b4a8ba956b1e78dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/5c9ecca79756491292cd4fdef5efe803.png

发表评论取消回复

表情：

评论列表（有 0 条评论，526人围观）

还没有评论，来说两句吧...

相关阅读

相关 IDEA打包VUE项目

目录 1、找到 package.json ，右键选择 Open in Terminal 打开控制台 2、输入 \`npm run

￡神魔★判官ぃ/ 2023年10月10日 17:14/ 0 赞/ 69 阅读

相关运行Vue项目步骤

![20200306140034823.png][] [20200306140034823.png]: https://img-blog.csdnimg.cn/202003

绝地灬酷狼/ 2023年07月11日 15:19/ 0 赞/ 118 阅读

相关 vue项目建立步骤

一建立vue项目 vue init webpack personMsg（最后一个是项目名） ![20191225150224353.png][] 二引入其他插

左手的ㄟ右手/ 2023年06月25日 03:24/ 0 赞/ 62 阅读

相关前端vue项目打包,后端maven项目打包

前端vue直接在VScode里输入命令 ![在这里插入图片描述][20200512161417549.png] npm run build 前端会多出来这样

素颜马尾好姑娘i/ 2023年03月13日 06:40/ 0 赞/ 143 阅读

相关 vue项目打包

cd到项目目录下或在WebStorm中打开项目后的Terminal中输入以下命令: npm run build:prod 或者 npm run build

系统管理员/ 2022年11月19日 01:15/ 0 赞/ 260 阅读

相关 vue项目打包App

本地的vue项目打包成App。这里以Hbuilder为例。首选命令行进入项目的目录执行 npm run build ![20171223140548589][] 打包成功之

朱雀/ 2022年06月03日 08:23/ 0 赞/ 323 阅读

相关 vue项目打包

打包命令 npm run build 命令执行完后，会生成一个dist目录，里面包含index.html的静态文件。注意点：默认配置情况下，会发现文件可以

男娘i/ 2022年02月24日 15:05/ 0 赞/ 363 阅读

相关 Vue项目打包

如果你还没有搭建Vue环境，请参考我的这篇文章\[[https://blog.csdn.net/u012577474/article/details/92849764][htt

柔情只为你懂/ 2021年09月20日 07:40/ 0 赞/ 521 阅读

相关 vue项目打包步骤

vue项目打包一、终端运行命令 npm run build 二、打包成功的标志与项目的改变，如下图： ![70][] ![70 1][] 3

你的名字/ 2021年09月15日 14:50/ 0 赞/ 527 阅读

相关 SpringBoot项目打包步骤详解

将SpringBoot打包成可执行的JAR包前言步骤前言在项目开发完成之后，可以直接用IDEA将其打包成JAR包运行，也可以打包成WAR

绝地灬酷狼/ 2021年09月01日 10:50/ 0 赞/ 656 阅读