前端项目打包与发布

04-23 4171阅读 0评论

前端项目打包与发布

前端项目打包与发布
- 使用静态服务器工具包发布打包
- 使用动态Web服务器（Tomcat）发布打包
- Vue-devtools
- Vue-devtools的安装
- Vue-devtools使用
  前端项目打包与发布
  
  在控制台中输入npm run build命令对当前Vue项目进行打包
  打包完成，控制台会输出Build complete。并且在Vue项目中生成一个dist的打包文件，
  
  使用静态服务器工具包发布打包
  
  步骤1：首先安装全局的serve，在命令行输入命令npm install-g serve，
  步骤2：在WebStorm控制台输入命令。
  
  serve dist　　//serve + 打包文件名
  
  
  使用动态Web服务器（Tomcat）发布打包
  
  步骤1：修改配置文件webpack.prod.conf.js
  步骤2：重新打包步骤3：将dist文件夹复制到运行的Tomcat的webapps目录下，修改dist文件夹为项目名称（本例中为vue-project）
  
  步骤4：启动Tomcat，使用浏览器访问输出的地址
  
  Vue-devtools
  
  在开发时经常要观察组件实例中data属性的状态，方便进行调试，但一般组件实例并不会暴露在window对象上，无法直接访问内部的data属性，若只通过debugger进行调试则效率太低。所以Vue官方推出一款Chrome插件Vue-devtools，Vue-devtools是一款基于Chrome浏览器的插件，用于调试Vue应用，这可以极大地提高调试效率。本节主要介绍Vue-devtools的安装和使用。
  
  Vue-devtools的安装
  
  Vue-devtools的安装步骤如下。
  （1）通过GitHub下载Vue-devtools库，网址为https://GitHub.com/vuejs/vue-devtools/tree/v5.1.1。使用git下载，命令如下：
  git clone https://GitHub.com/vuejs/vue-devtools
  （2）在vue-devtools目录下安装依赖包，命令如下：
```
cd vue-devtools　 　//进入文件目录
npm install         //如果安装太慢可以用cnpm代替
```
  （3）编译项目文件，命令如下：
```
npm run build
```
  （4）修改manifest.json文件，把＂persistent＂：false改成＂persistent＂：true。一般所在路径是：自定义路径\vue-devtools-5.1.1\shells\chrome\manifest.json。
  （5）使用谷歌浏览器并在地址输入栏输入chrome：//extensions/进入插件界面。
  单击“加载已解压的扩展程序”按钮，选择Vue-devtools shells chrome放入，安装成功后如图
  
  Vue-devtools使用
  
  当添加完Vue-devtools扩展程序之后，在调试Vue应用的时候，打开F12，在Chrome开发者工具中会看一个Vue栏，单击之后就可以看见当前页面Vue对象的一些信息，如图7-22所示。Vue是通过数据驱动的，这样就能看到对应的数据了，方便进行调试。Vue(-?)devtools使用起来还是比较简单的，上手非常容易。

相关阅读：

1、Axios使用

2、【NodeMcu-ESP8266】引脚使用参考指南——推荐收藏

3、【数据结构】图论（图的储存方式，图的遍历算法DFS和BFS、图的遍历算法的应用、图的连通性问题）

4、Oracle+RAC静默安装系列（基于RHEL9/国产/麒麟/华为欧拉的生产案例）

5、使用FastDDS编译IDL文件

免责声明

1、本网站属于个人的非赢利性网站，转载的文章遵循原作者的版权声明。
2、本网站转载文章仅为传播更多信息之目的，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所
提供信息的准确性及可靠性，但不保证信息的正确性和完整性，且不对因信息的不正确或遗漏导致的任何
损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务，本网站概不负责，亦不负任何法律责任。
4、本网站所刊发、转载的文章，其版权均归原作者所有，如其他媒体、网站或个人从本网下载使用，请在
转载有关文章时务必尊重该文章的著作权，保留本网注明的“稿件来源”，并白负版权等法律责任。

手机扫描二维码访问