82 npm install npm run配置scripts中的命令配置环境变量 vue-cli-service命令 vue.component与use的区别 vue项目中如何使用字典

smallcelebration

已于 2023-02-07 16:20:27 修改

阅读量1.1k

点赞数

分类专栏：遇到过的知识点--链接集文章标签： npm 前端 javascript

于 2023-02-06 17:07:04 首次发布

本文链接：https://blog.csdn.net/samllucky/article/details/128903806

版权

遇到过的知识点--链接集专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.npm install

运行npm install命令的时候会发生什么？

运行npm install命令的时候会发生什么？-云社区-华为云大致的流程是：`npm install`命令输入 > 检查node_modules目录下是否存在指定的依赖 > 如果已经存在则不必重新安装 > 若不存在，...https://bbs.huaweicloud.com/blogs/348904大致答案

【摘要】 大致的流程是：`npm install`命令输入 > 检查node_modules目录下是否存在指定的依赖 
> 如果已经存在则不必重新安装 > 若不存在，继续下面的步骤 > 向 registry
（本地电脑的.npmrc文件里有对应的配置地址）查询模块压缩包的网址 > 
下载压缩包，存放到根目录里的.npm目录里 > 解压压缩包到当前项目的node_modules目录中。

2.npm run配置scripts中的命令

运行npm run命令的时候会发生什么？

运行npm run命令的时候会发生什么？-云社区-华为云运行`npm run`命令之后会发生什么呢，本文就来啦；本文会分为：script字段、 .bin目录下的软链接。https://bbs.huaweicloud.com/blogs/352669大致内容

1.npm run xxx(会去node_modules/.bin找到映射的可执行文件)

2.bin目录下的软链接：直接在项目根目录下的package-lock.json文件下，找到bin字段，会有声明

3.npm start:可以默认执行node server.js命令,因为node已经全局安装，可以直接被调用。
        如果scripts字段里没有start，也不会报错，会去默认执行node server.js命令。

4.npm run:只运行了npm run命令，那么就会去执行scripts字段里所有的脚本命令。

配置scripts

【前端工程化】配置package.json中scripts命令脚本，新手必学_我有一棵树的博客-CSDN博客_package.json scripts【前端工程化】配置package.json中scripts命令脚本，新手必学https://blog.csdn.net/qq_17335549/article/details/126784270

3.配置环境变量

前端开发中环境变量配置_前端~小小码农的博客-CSDN博客_前端配置环境变量在一些特殊的配置文件中定义环境变量文件名称对应环境说明.env.development开发环境当运行npm run dev 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量.env.production生产环境当运行npm run build:prod 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量.env.staging模拟生产环境可以理解为production环境的镜像，尽最https://blog.csdn.net/m0_50499376/article/details/116721080

4. vue-cli-service命令

vue-cli-service的使用 - hi-gdl - 博客园vue-cli项目中，会安装给一个名为vue-cli-service的命令。 vue-cli-servie serve vue-cli-service serve 会启动一个开发服务器（基于webpahttps://www.cnblogs.com/hi-gdl/articles/15768305.html安装了@vue/cli-service 模块后即可调用 vue-cli-service 的命令

调用vue-cli-service的方法：

通过npm scripts调用：默认在package.json中有以下配置：

通过 npm run serve或npm run build即可调用。

vue-cli-servie serve

vue-cli-service serve 会启动一个开发服务器（基于webpack-dev-server）并且附带了开箱即用的模块热重载（Hot-Module-Replacement）。

用法：vue-cli-service serve [options] [entry]
 
选项：
 
  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)

除了通过命令行，可以使用vue.config.js中devServer字段配置开发服务器的参数；下面给出一段配置的例子：

devServer: {
    port: 8080,
    before(app) {
        if ('true' !== process.env.NO_MOCK) {
            apiMocker(app, path.resolve('./mocker/index.js'));
        }
    },
    disableHostCheck: true,
},

vue-cli-service build

vue-cli-service build 会在dist/ 目录下面产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好地缓存而做的 vendor chunk splitting。它的shunk manifest 会内敛在HTML里。

用法：vue-cli-service build [options] [entry|pattern]
 
选项：
 
  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化