VUE-CLI Vue安装及开发，npm run build无法查看项目的问题

最新推荐文章于 2024-05-28 10:24:03 发布
原创 最新推荐文章于 2024-05-28 10:24:03 发布 · 629 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文分享了在使用npm run build命令时遇到的错误及解决过程。从修改config/index.js中的路径配置开始，到最终在util.js中添加代码解决静态资源404问题。

npm run build小编我报下图的错误，一脸蒙。


查资料之后，config/index.js  ‘/‘修改为‘./‘




网上都是这么改的。之后小编发现有些静态资源不能访问，请求404.默默的又查了一些资料


找到了build下面的util.js文件，添加了一行代码，继续重新npm run build


最后 

GET http://localhost:63342/static/js/7.2812bb3a7209ba675ee4.js net::ERR_ABORTED

Loading chunk 7 failed.


解决方案



解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
当我们在使用Vue-cli进行项目的构建打包时，经常需要区分开发环境与生产环境。在生产环境下，我们通常会使用npm run build命令进行代码的打包，以优化性能、压缩文件等。然而，在完成打包后，经常遇到在本地无法打开...
vue-cli开发的商城源代码
01-18
在开发过程中，开发者可以通过`npm run serve`命令启动本地开发服务器，`npm run build`命令将项目打包成生产环境的静态资源。 此项目展示了Vue.js在构建大型电商应用中的应用，涉及到前端架构设计、组件化开发、...
Vue 4 ，NodeJS 1 ，Vue项目终端提示，‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序？npm i （npm install）安装不上的原因
热门推荐
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
11-02 2万+
⭐我们在启动项目时，有时遇到一个常见的错误信息：'vue-cli-service' 不是内部或外部命令，也不是可运行的程序。这通常意味着虽然已经安装了Vue CLI，但系统却未能正确识别 vue-cli-service 这个命令行工具。此问题可能源于多种原因，包括全局与本地依赖项配置不当、环境变量设置不准确或是项目中缺失必要的开发依赖等。这里快速定位并解决该问题，确保能够顺利地继续进行项目的开发工作。
关于npm安装vue-cli错误问题
01-08
关于npm安装vue-cli错误问题 问题描述 npm ERR! { Error: EPERM: operation not permitted, unlink ‘C:\Users\GXP300\AppData\Roaming\npm\node_modules.staging\typescript-886383bb\lib\tsserverlibrary.js’ npm ERR! errno: -4048, npm ERR! code: ‘EPERM’, npm ERR! syscall: ‘unlink’, 主要针对这类错误问题解决方法 解决方法 1、
Vue分环境打包
立志欲坚不欲锐，成功在久不在速度
07-07 4543
在项目开发过程中，我们的项目一般分为开发版，测试版，生产版，之前每次发布不同的版本都需要在源码中修改api地址然后再次打包，这样就很麻烦，如果可以根据不同环境进行打包就完美了。 下面就来介绍如何进行分环境打包(前提是你已经创建好了一个vue项目，我这里用的是vue4) 第一步：打包package.json文件 可以看到scripts 我们添加一个test打包环境 "test":"vue-cli-service serve --mode test" 解释：serve是运行命令，s..
vue项目报错vue-cli-service: command not found
大圣归来圣骑士清欢的博客
12-07 1万+
vue如何配置环境变量
Node.js+Vue CLI的安装
aiains的博客
10-14 601
node.js的安装与配置，以及脚手架vue cli的安装与使用
vue-cli-plugin-electron-builder-适用于Electron的Vue CLI 3插件，无需使用Electron Builder的必需配置。-Vue.js开发
05-27
Vue CLI插件Electron Builder可以轻松构建带有Electron Build状态的台式机Vue.js应用程序：快速入门：在Vue CLI Plugin Electron Builder可以轻松地构建带有Electron Build状态的台式机Vue.js App桌面。 ：在使用Vue...
基于vue-cli npm run build之后vendor.js文件过大的解决方法
10-17
当使用vue-cli进行项目构建（npm run build）后，如果发现生成的vendor.js文件体积过大，这将直接影响到首屏加载时间，降低用户体验。为了解决这个问题，可以采取以下方法。 首先，了解问题的本质。vue-cli的npm ...
Vue CLI配置与安装
zhuerla的博客
08-15 1万+
Vue CLI配置与安装--Element UI引用--Vant引用
npm run serve出现‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序或批处理文件的错误(已解决)。
最新发布
m0_64027967的博客
05-28 3万+
解决启动Vue项目时，出现'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件的错误。
vue-cli2.9.6 build项目无法访问资源 & 无法访问elementUI字体
夏2同学的博客
12-11 341
build后资源无法访问 根目录下面 /config/index.js assetsPublicPath改为 ‘./’ elementUI字体无法访问 /build/utils.js 添加 publicPath:'../../'
vue 在 webstorm中使用webpack build 之后的dist文件访问不了如何解决？
sunshu123456的博客
06-10 1719
vue 在 webstorm中使用webpack build 之后的dist文件访问不了如何解决？dist文件访问不了如何解决？1、安装express-generator生成器2、创建一个express项目3、进入expressDemo目录，安装项目依赖4、把dist目录下的所有文件复制到express项目的public文件夹下 dist文件访问不了如何解决？ 1、安装express-generator生成器 执行 $ npm install express-generator -g 进行安装 2、创建
vue项目build打包后，静态和服务器访问效果出不来，icon图标无法加载？过来我教你
Mgf_Yzy的博客
08-28 1798
今天遇到一个令人很头疼的问题，vue项目build之后，静态资源和服务器端访问空白，啥效果都没有，最后无奈只好查百度，找方法，正当我放弃的时候，突然找到了救心丸 来，直接上图 好不容易打包好的文件，结果给我报一堆错，难怪页面出不来 当页面出不来时，可能是你的路径不对 查原因是因为绝对路径的原因：你的config文件夹中的index.js文件，里面的build代码块路径是这样的 这里的assetsPublicPath路径是根路径，静态资源当然是访问不到的，修改后是这样的，及那个绝对路径改为相对路径就好了
npm install 404问题
weixin_50096821的博客
10-02 1万+
这个时候我们再安装npm包，比如npm install create-vue，这个时候报了。当我们在安装npm上的包时，明明看到npm上是有包的，但是安装的时候却报了。这个问题大概率是由于我们设置了。的问题，比如是淘宝镜像或者是我们的其他代理。
vue-cli（vue脚手架）安装 详细教程
keke2486的博客
08-26 2万+
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。 一.安装vue-cli 1、 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 注意：webpack 4.
Vue--解决build静态资源后无法直接访问问题
随便写写
07-08 6672
问题原因，打包之后访问路径错误，index.html打开是空白， F12报错找不到引用文件，一看引用在了根目录（文件所在盘，如：C盘、E盘） 解决 步骤1，修改使用路由方式 将路由从history换成hash const router = new VueRouter({ mode: "hash", base: process.env.BASE_URL, routes }); 步骤2，修改使用配置文件 // vue.config.js module.exports = { // 解决
解决：‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件
cunning_of_fox的博客
10-10 1917
解决：‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件
Vue CLI配置指南（1）
悦涵仙子的技术笔记本
08-25 1997
一、何为CLI CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。 它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。 你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。 二、何为CLI 服务 CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。 CLI 服务是构建于 webpack 和 webpack-dev
Scripts available in tool-template-vue-cli@0.1.0 via `npm run-script`: serve vue-cli-service serve build vue-cli-service build && node modifyFile.js lint vue-cli-service lint
07-21
根据你提供的信息，tool-template-vue-cli@0.1.0 通过 `npm run-script` 提供了三个可用的脚本： 1. `serve`：运行 `vue-cli-service serve` 命令。 该命令启动开发服务器，用于在开发过程中提供热重载和实时更新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值