WebStrom使用实践配置总结

怼烎@ 2023-06-30 08:46 18阅读 0赞

## **【1】Cannot save files** ##

**主要会有两种异常：**

*  生成 `_jb_old_ _jb_tmp_`文件
 *  目标拒绝访问

**解决方案**

以管理员身份运行webstorm然后进行如下设置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]

--------------------

## **【2】webstorm创建vue项目** ##

先安装基本环境，参考博文：[Vue初学之使用npm搭建Vue环境][Vue_npm_Vue]

**① 安装git**

参考博文：[git安装详解][git]

webstorm配置git:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]

**② 创建vue项目**

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

**③ 使用webstorm创建vue项目时vuecli不执行，提示git不是内部或外部命令**

这是安装git的时候，如下图所示默认选择了第一个：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]  
两种解决方案：

*  重装git，选择第二或者第三；
 *  修改环境变量，添加bin路径和git-core路径

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

--------------------

## **【3】webstorm打包部署项目到Tomcat** ##

你可以直接放到NGINX进行反向代理，这里以Tomcat示例。

**① 修改webpack.prod.conf.js**

如下所示，添加publicPath:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5]

**② 打包项目**

package.json上右键-Show npm Scripts，或者直接点击左侧npm栏。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 6]

如下图所示，双击build:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 7]  
或者终端执行命令：`npm run build`

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

打包后的项目在dist文件夹下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 9]  
拷贝该文件夹-重命名为vuedemo-扔到Tomcat的webapps/下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 10]  
启动Tomcat，访问`http://localhost:8080/vuedemo/`：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 11]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200116085856240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[Vue_npm_Vue]: https://janus.blog.csdn.net/article/details/103988424
[git]: https://blog.csdn.net/J080624/article/details/81269297
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200116101948408.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200116101743935.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200116104220233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200116104359108.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200116105332864.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200116105432935.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200116105539428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200116105620688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200116105701202.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200116105815457.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200116110002730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9qYW51cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70