vue项目下常用的npm命令

港控/mmm° 2023-10-07 18:42 35阅读 0赞

#### 文章目录 ####

*  1、npm run serve
 *  2、npm install
 *  3、npm run duild
 *  其他
 *  参考文档

## 1、npm run serve ##

*  一般为npm项目的启动命令

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16]

## 2、npm install ##

*  用于构建vue项目启动需要的环境
 *  构建项目需要的依赖  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 1]
 *  运行前，文件总大小为1.8MB  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 2]
 *  运行后，大小为166MB，node\_modules占了164MB

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 4]

## 3、npm run duild ##

*  用于构建服务器启动，启动方式看参考文档（不是三言两语能解释的）
 *  运行前  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 5]
 *  运行后，这个dist文件夹大致为10.9MB（作者的数据）

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 6]

*  打包之后的使用  
    一开始运行npm run build 命令时，有这么一段提示：  
    ![在这里插入图片描述][f41504f125c14276bb829ab926e5d508.png]  
    这句话的意思就是：构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。  
    解决方式：创建下面这个文件，重新运行npm run build  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 7]

vue.config.js

module.exports={
        
        publicPath:"./"
    }

## 其他 ##

*  npm不仅仅可以在vue中使用，还有不少的地方使用到这个工具，所以有不少的命令和vue并没有关系，npm只是vue项目中的一项工具而已。

## 参考文档 ##

*  [npm run build 打包命令][npm run build]
 *  [vue-cli使用 npm run build打包后流程][vue-cli_ npm run build]
 *  [vue3项目 目录结构没有config文件夹][vue3_ _config]
 *  [express 搭建本地简易服务器][express]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/cd0e2dac4632494e97d72a54fa3905c7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/f9cc58ba701b421b8464e182d1ed4248.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/9d32849ebbbe48fab52f6843684506f2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/6eb8dd3077624c058f6fe6fb6b9a5f3e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/c12ea43d906b41beb43e8bc8cd58ec4e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/8ed755dcf1bd43878f37fb8afe059571.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/b6e3dc0926f94a0d81af22611b5e7f38.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[f41504f125c14276bb829ab926e5d508.png]: https://img-blog.csdnimg.cn/f41504f125c14276bb829ab926e5d508.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/e697fd99d34643b7bbe07c4dfceb1e90.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[npm run build]: https://blog.csdn.net/m0_56174822/article/details/117235949
[vue-cli_ npm run build]: https://blog.csdn.net/weixin_40588273/article/details/108691973
[vue3_ _config]: https://blog.csdn.net/m0_54106378/article/details/114362538
[express]: https://blog.csdn.net/qq_37818095/article/details/118491152