首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法在生产环境中使用vue-cli调用npm run build

在生产环境中无法使用vue-cli调用npm run build的原因是vue-cli是一个用于开发和构建Vue.js项目的脚手架工具,而npm run build是vue-cli提供的一个命令,用于将Vue.js项目打包成静态文件以供部署。

然而,在生产环境中使用vue-cli调用npm run build存在一些问题和限制。首先,vue-cli生成的默认配置适用于开发环境,包含了一些开发时需要的功能和工具,例如热重载、代码调试等。这些功能在生产环境中是不需要的,而且可能会影响性能和安全性。

其次,vue-cli生成的默认配置可能不适用于生产环境的特定需求。生产环境中可能需要进行一些优化和定制,例如压缩代码、代码分割、缓存策略等。使用vue-cli调用npm run build无法满足这些需求,需要手动进行配置和优化。

因此,在生产环境中,推荐使用其他工具或自定义配置来构建和部署Vue.js项目。以下是一些常用的替代方案:

  1. 使用Webpack:Webpack是一个强大的模块打包工具,可以灵活配置和定制构建过程。可以通过配置Webpack来实现类似于vue-cli的构建功能,同时满足生产环境的需求。
  2. 使用Rollup:Rollup是一个面向现代JavaScript模块的打包工具,专注于构建小型、高性能的库和应用程序。它可以通过插件系统进行定制,适用于构建Vue.js项目的生产环境。
  3. 使用Parcel:Parcel是一个快速、零配置的Web应用程序打包工具,适用于构建简单的Vue.js项目。它可以自动处理依赖关系,并且具有良好的性能和开发体验。
  4. 使用腾讯云的云开发服务:腾讯云提供了一系列云开发服务,包括云函数、云数据库、云存储等,可以方便地构建和部署Vue.js项目。具体可以参考腾讯云云开发文档:腾讯云云开发

总结起来,在生产环境中,不建议直接使用vue-cli调用npm run build来构建Vue.js项目。而是推荐使用其他工具或自定义配置来满足生产环境的需求。以上提到的Webpack、Rollup、Parcel以及腾讯云的云开发服务都是不错的选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

vue面试题 vue-cli相关知识点(一)

下载 node_modules 资源包的命令: npm install 启动 vue-cli 开发环境npm命令: npm run dev vue-cli 生成 生产环境部署资源 的 npm命令:...npm run build 用于查看 vue-cli 生产环境部署资源文件大小的 npm命令: npm run build --report 请说出vue-cli工程每个文件夹和文件的用处 1、build...常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。...3、dist 文件夹:默认 npm run build 命令打包生成的静态资源文件,用于生产部署。 4、node_modules:存放npm命令下载的开发环境生产环境的依赖包。...run xxx 命令调用node执行的 .js 文件 dependencies:生产环境依赖包的名称和版本号,即这些 依赖包 都会打包进 生产环境的JS文件里面 devDependencies:开发环境依赖包的名称和版本号

1.8K31

vue-cli 工程目录结构详介绍

问题一:请说出vue-cli工程每个文件夹和文件的用处 vue-cli目录结构: vue-cli目录解析: build 文件夹:用于存放 webpack 相关配置和脚本。...开发仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库,或者配置一下 UI 库。...常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。...dist 文件夹:默认 npm run build 命令打包生成的静态资源文件,用于生产部署。 node_modules:存放npm命令下载的开发环境生产环境的依赖包。...run xxx 命令调用node执行的 .js 文件 dependencies:生产环境依赖包的名称和版本号,即这些 依赖包 都会打包进 生产环境的JS文件里面 *devDependencies:开发环境依赖包的名称和版本号

1.4K40

基于 Vue-cli 3x的项目部署

之前vue项目发布部署过程,把流程梳理下来,做个小分享。 项目中涉及使用vue-cli 3x脚手架、自动化部署工具jenkins、nginx等。...-coverage", }, 复制代码 本地开发环境我们使用 npm run serve,但是当我们要部署到线上时,就需要使用npm run build,在生产环境、测试环境生成代码及静态资源等...举个例子:我们看到 生产环境模式 build_production 与 测试环境模式 build_test 的区别就是后面的 “ -- mode ” mode的配置 在产品开发过程,一般需要经过本地开发...简单的理解就是 你执行npm run build_test时,设置的环境变量就是从.env.test 获取,创建也是依照.env....调用方式为 process.env.VUE_APP_SECRET 2. index使用 如:`favicon.ico

76321

Vue2全家桶之一:vue-cli

1.安装vue-cli使用npm(需要安装node环境)全局安装webpack,打开命令行工具输入:npm install webpack -g或者(npm install -g webpack)...② 全局安装vue-clicmd输入命令: npm install --global vue-cli (我已经安装过,为了更直观我电脑上重新演示下) 安装成功: 安装完成之后输入 vue...可以看到dev的设置,build/webpack.dev.conf.js,该文件是开发环境webpack的配置入口。...webpack.dev.conf.js中出现webpack.base.conf.js,这个文件是开发环境生产环境,甚至测试环境,这些环境的公共webpack配置。可以说,这个文件相当重要。...项目开发完成之后,可以输入 npm run build 来进行打包工作。 npm run build 另: 1.npm 开启了npm run dev以后怎么退出或关闭? ctrl+c 2.

53341

Vue CLI 2.x搭建vue,目录最全分析

查看安装成功否(有版本号就是成功,V大写) vue -V 查看npm注册表里vue-cli版本号: cnpm view vue-cli 三、vue-cli 使用 安装过webpack 、vue-cli.../check-versions')() //调用版本检查 process.env.NODE_ENV = 'production' //将环境配置为生产环境 const ora = require('ora.../webpack.prod.conf')//引入生产环境配置文件 // 终端显示loading效果,并输出提示 const spinner = ora('building for production...,如:过滤器,列表项等) (3)router文件夹:router/index.js文件配置页面路由 (4)App.vue:是整个项目的主组件,所有页面都是通过使用开放入口...2、然后npm run dev:跑起来~ ? 3、生成打包文件 :npm run build 然后你会发现项目多了个dist文件夹(用于部署到生产环境用,是打包压缩之后的src文件夹) ?

1.2K20

npm有个命令突破我知识认知了

你可能非常熟悉npm run xxx这个命令,每次上线前你都在执行npm run build,甚至你常常在npm i的等待摸鱼。 当某一天你的同事在你电脑输入了一行命令......devDependencies是一个在生产环境需要依赖的包,dependencies与devDependencies的区别是:npm i xx -s和npm i xx --save-dev,实际项目开发...打开node_modules/ramda,我们能从这个优秀的ramda库中发现些什么, 注意scripts scripts配置中有一个"build": "npm run build:es && npm...,"build": "npm run build:es && npm run build:cjs && npm run build:umd && npm run build:umd:min && npm...run build:mjs",,ramda,这行命令执行了多行配置 npm init生成的package.json内部还有其他的字段,更多可以参考官方文档pckage.json[3],你已经了解

65220

Vue安装及环境配置、开发工具

由于Node.js 默认安装了 npm,所以不用额外配置就能在全局命令中使用 npm命令,cmd测试一下是否安装成功了:输入 node -v 与 npm –v分别查看版本信息 2....安装webpack模板 命令行运行命令 npm install webpack -g ,然后等待安装完成。...查看vue代码 1、VS code 启动项目 创建完项目后,首先用VS打开项目所在的文件夹,点击工具栏的终端——新建终端,在下面的终端窗口命令行输入 npm run serve启动,编译成功后会自动打开浏览器...1、npm run build 编译该工程 2、npm run serve 启动该工程 启动成功之后,打开路径看到如下界面说明成功。...五、vue项目结构 1、build:构建脚本目录 1)build.js ==> 生产环境构建脚本; 2)check-versions.js ==> 检查npm,node.js版本; 3)utils.js

96610

vue环境安装与配置(Linux安装常用开发工具)

由于Node.js 默认安装了 npm,所以不用额外配置就能在全局命令中使用 npm命令,cmd测试一下是否安装成功了:输入 node -v 与 npm –v分别查看版本信息 2....安装webpack模板 命令行运行命令 npm install webpack -g ,然后等待安装完成。...查看vue代码 1、VS code 启动项目 创建完项目后,首先用VS打开项目所在的文件夹,点击工具栏的终端——新建终端,在下面的终端窗口命令行输入 npm run serve启动,编译成功后会自动打开浏览器...1、npm run build 编译该工程 2、npm run serve 启动该工程 启动成功之后,打开路径看到如下界面说明成功。...五、vue项目结构 1、build:构建脚本目录 1)build.js ==> 生产环境构建脚本; 2)check-versions.js ==> 检查npm,node.js版本; 3)utils.js

69010

Vue+tp6 php框架如何快速建立一个前后端分离项目

作者主要是写后端的,所以本文主要以后端的角度,讲如何使用Vue+Tp框架结合,快速打通一个前后端分离的项目部署,可以作为后端学习Vue的入门步骤,通过此教程,你可以学到在生产环境和本地环境,vue+tp...提示: 1、写本文章时,代码环境Windows 系统下,本地使用PHPstudy集成环境讲解。...:构建脚本目录     1)build.js ==> 生产环境构建脚本;     2)check-versions.js ==> 检查npm,node.js版本;     3)utils.js ==>...5.打包vue项目 1、我们开发完成后,正式部署并不是用开发环境npm run dev ,通常是会使用打包命令,将项目打包部署 D:\phpstudy_pro\WWW\vue-demo>npm...Opening index.html over file:// won't work. 2、打包好后,可以项目文件夹,看到一个 dist 文件夹,这就是打包好的项目文件夹了,我们可以使用 nginx

4.1K31

vue -- config index.js 配置文件详解

此文章介绍vue-cli脚手架config目录下index.js配置文件 此配置文件是用来定义开发环境生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块...也就是生产编译环境下的一些配置 build: { // 导入prod.env.js配置文件,只要用来指定当前环境,详细见(1) env: require('....install --save-dev compression-webpack-plugin // 下面是是否在生产环境压缩代码,如果要压缩必须安装compression-webpack-plugin...: // `npm run build --report` // Set to `true` or `false` to always turn it on or off...此配置文件是用来定义开发环境生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 上代码

1.9K20

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

babel自身的介绍 editorconfig控制编辑器的文字样式之类的,可以删掉 gitignore是git的配置 index.html就是单页面的html webpack.config.js已经区分了开发环境还是生产环境...,生产环境加上uglify混淆 src目录包括了页面的vue单文件(组件)和主入口main.js 2 运行分析原型项目 vue-cli把project.json、webpack配置还有npm脚本都准备好了...:8080 npm run dev # build for production with minification npm run build 运行npm run dev...环境变量的设置,使用的是cross-env工具,npm脚本运行设置的cross-env NODE_ENV=production >App.vue和index.html 这两个就是很基本的vue功能了...>一些项目优化 全局共用css的打包 页面main.js,直接import即可,最终会转换为注入到html的js代码。 import '../..

1.3K20

使用Vue-cli搭建项目教程

使用 vue-cli 搭建项目 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,Github仓库 安装 Node.js 首先需要安装node...环境,可以直接到node官网下载安装包,安装完成后,可以命令行工具输入 node -v 查看是否成功,不成功清除npm缓存npm cache clean重新安装....项目 cd VueProject 然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖 cnpm install 启动项目 npm run dev 爬坑日记 如果浏览器打开之后...另外我还将 build 的路径前缀修改为 ‘ ./ ‘(原本为 ‘ / ‘),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ‘ / ‘ 开头,本地是无法找到对应文件的(服务器上没问题...项目开发完成之后,可以输入 npm run build 来进行打包工作 打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看 项目上线时,只需要将 dist 文件夹放到服务器就行了

68730
领券