vue项目中运行npm run dev不生成dist文件

最新推荐文章于 2024-05-22 17:31:34 发布
最新推荐文章于 2024-05-22 17:31:34 发布
阅读量740 收藏 1
点赞数 1
文章标签： npm 前端 node.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53691136/article/details/134278563
版权

输入npm run dev时，报错且不生成dist文件。

报错信息：

原因：node.js版本的问题。

解决思路：

在package.json文件内修改，在scripts内的每一项都添加内容：set NODE_OPTIONS=--openssl-legacy-provider

修改前：

修改后：

已解决:

谢谢观看，希望能帮助到你！

菜__菜
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue生成文件本地打开查看效果的实例
10-18
首先，当我们在Vue项目中执行`npm run build`命令时，Webpack会将源代码编译到dist目录下，生成一个用于生产环境的优化过的静态文件结构。然而，直接在浏览器中打开dist目录下的index.html文件时，可能会遇到CSS和JS...
vue打包不生成dist文件夹（IDEA使用命令行npm run build命令打包）
qq740874037的博客
07-04 8950
使用IDEA进行vue打包导致的不生成dist文件夹或打包部署不生效问题
在package.json中配置了build 这个命令了，为什么不能生成dist目录，npm run build 报错
热门推荐
D_Z_Yong的博客
12-10 1万+
npm run dev后并没有生成dist目录，但是浏览器里却读取了dist里的build.js？ 为什么呢？？ 当你跑npm run dev 命令时，打包之后走的是内存里的文件（前提要是先配置了webpack-dev-server），在页面中会通过script标签中的src属性引入的是./dist/builds.js。 如果你想要生成dist目录，要通过npm run bulid命令。 因为你没...
npm run dev:mp-weixin 打包报错-4082
最新发布
weixin_42656735的博客
05-22 205
1.升级vite版本 手动改为5.1.1 再npm install。2.更改依赖版本 package.json 文件中。解决方法：任意一种即可。
vue 打包后找不到dist文件夹
weixin_44257822的博客
01-15 1096
看了一下 config文件夹里面的index.js 文件 的build对象,执行npm run build 后 没有dist 文件。原来是默认的打包路劲被修改了 , 修改回来就好了,__dirname是获取当前位置的绝对路径。
13 个 npm 快速开发技巧
LuckyWinty的博客
07-17 412
来源 |http://www.fly63.com/article/detial/4015每天，数以百万计的开发人员使用npm或 yarn 来构建项目。运行npminit或npx ...
vue的dist文件未找到vue.min.js
qq_52811351的博客
04-17 424
axios的dist目录存在axios.min.js。vue的dist目录下不存在vue.min.js。
vue项目build打包后提交到git上没有dist目录的解决方案
在写作的路上持续输出。
03-28 2564
vue 项目 npm run build 后的dist 目录上传不到gitee 上的解决方式。
解决vue项目,npm run build后,报路径错的问题
10-14
在Vue项目中，`npm run build` 是用来执行生产环境构建的命令，它将优化代码并准备部署到服务器。然而，有时在执行此命令后，可能会遇到路径错误的问题，导致资源无法正确加载。本文将详细解析如何解决这个问题，并...
vue 查看dist文件里的结构(多种方式)
10-15
执行 `npm run report` 命令后，`report.json` 文件将在 `dist` 文件夹下生成，它包含了打包后所有文件的详细来源信息。这个报告可以帮助我们了解哪些模块占用了最多的资源，从而进行针对性的优化。 **方式二：利用...
webpack npm的dev,run,start区别.zip
12-11
1. `npm run dev`: 这个命令通常用于启动开发服务器，例如在Vue项目中，`npm run dev`会启动一个热更新的开发服务器，提供实时编译和自动刷新页面的功能。这有利于开发者快速看到代码改动的效果，而无需手动刷新或...
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。 vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index....
【webpack执行npm run dev后dist文件被清空】
qq_43542681的博客
08-16 1310
轻松解决webpack执行npm run dev后dist文件被清空的BUG
npm run dev 后dist 被情况_npm包 | 我的第一个npm安装包
weixin_39823269的博客
11-22 94
戳上面的蓝字关注我哦！我的第一个npm安装包应公司业务要求，需要制作桌面安装程序。同时也要替代QT，制作QT的安装程序。所以最后我选用了electron制作exe，配合Inno Setup Compiler制作安装包。因为这玩意是我一个人在研究，为了避免我哪天休息不在，还找我打包的情况，我特意写了将这个项目制作成为了一个npm安装包，并附上相应文档，相信还是能看懂的。1 将自己的函...
NPM(Node Package Manager,Node包管理器)
A168664969的博客
03-23 184
简介 每个Node应用都有一个包含该应用元数据的文件-package.json，包含应用名、版本号以及依赖等信息。 我们使用NPM从NPM库下载并安装第三方包。 所有下载的包以及其依赖都保存在node_modules文件夹，这个文件夹应该排除在源代码版本控制（如git、SVN等）外。 Node的包版本号符合的语义格式为：major.minor.patch (即主要版本、次要版本、补丁)...
日常开发记录--npm run build:prod打包后的文件在dist文件夹下
machine_vision123的博客
04-27 1771
npm run build:prod打包后的文件在dist文件夹下
如何在VSCode中打包Vue项目？
2301_76209425的博客
05-13 548
在配置打包命令前，我们先需要安装Vue Cli。现在，我们已经完成了Vue项目的配置，可以开始打包了。之前，我们需要先安装项目所需的依赖。四、压缩打包后的文件，压缩后的zip文件就是打包好的文件。
vue项目npm run build打包dist文件及打包后空白的解决方法
qq_52126119的博客
11-15 1万+
要想将vue的移动端项目打包成手机的app软件apk格式，首先要将项目打包出dist文件。若空白查看一下配置，可能是配置有错误，（本人用的情况一配置空白，换成了情况二的配置，成功解决！！）
npm run build无法打包的可能原因 npm ERR! missing script: build
走在搬砖的路上！
05-14 946
结果报错npm ERR! missing script: build，后来发现package.json中scripts参数为 "scripts": { "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", "l.
Nuxt2打包清除css 怎么yarn下载 使用purgeCSS
04-27
要使用 PurgeCSS 来清除 Nuxt2 打包后的 CSS，需要进行以下步骤： 1. 首先，安装 PurgeCSS 和 @nuxtjs/purgecss 依赖项： ``` yarn add purgecss @nuxtjs/purgecss --dev ``` 2. 在 Nuxt2 项目的 nuxt.config.js 文件中，添加以下配置： ``` buildModules: [ '@nuxtjs/purgecss' ], purgeCSS: { mode: 'postcss', enabled: (process.env.NODE_ENV === 'production') }, ``` 这里使用了 @nuxtjs/purgecss 模块，添加了 mode 和 enabled 配置项。mode 设置为 postcss，使得 PurgeCSS 可以在 PostCSS 中运行。enabled 配置项则表示只有在生产环境时才会使用 PurgeCSS。 3. 在项目根目录下创建一个 purgecss.config.js 文件，添加以下配置： ``` module.exports = { content: [ 'components/**/*.vue', 'layouts/**/*.vue', 'pages/**/*.vue', 'plugins/**/*.js', 'nuxt.config.js' ], whitelist: ['html', 'body'], whitelistPatterns: [/^nuxt-/, /^page-/], whitelistPatternsChildren: [/^token/, /^pre/, /^code/] } ``` 这里的 content 选项指定了需要匹配 CSS 的文件路径，whitelist 选项指定了白名单，保留 html 和 body 标签的样式，whitelistPatterns 则指定了对哪些样式类名进行保留，whitelistPatternsChildren 则指定了对哪些子元素的样式进行保留。 4. 最后，在 package.json 文件中添加以下 scripts： ``` "scripts": { "build": "nuxt build", "generate": "nuxt generate", "purgecss": "purgecss --config purgecss.config.js --out static/css/ --css static/css/*.css" } ``` 这里添加了一个名为 purgecss 的脚本，运行时会使用 purgecss.config.js 配置文件，并将输出的 CSS 文件保存在 static/css/ 目录下。 现在，你可以在终端中运行以下命令，使用 PurgeCSS 清除 Nuxt2 打包后的 CSS： ``` yarn run purgecss ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值