vue前端项目部署nginx

文章目录

• 5. 前端工程化

• 5.1 vue-cli
• 5.2 项目的打包与发布

• 5.2.1 使用静态服务器工具包发布打包
• 5.2.2 使用动态web服务器(Tomcat)发布打包

• 5.3 Vue-devtools

• 5.3.1 Vue-devtools安装
• 5.3.2 Vue-devtools的使用

---

参考

5. 前端工程化

5.1 vue-cli

vue create demo1	//使用vue-cli创建一个vue项目

vue init webpack vue-project	//另一种方式
npm install	//安装依赖

注：

• vue项目都是自带热部署的。
• 如果浏览器打开之后没有加载出页面，有可能是本地的8080端口被占用，此时需要修改一下配置文件config>index.js。
• 修改端口号是为了防止端口号被占用。
• 把assetsPublicPath属性前缀修改为“./”(原本为“/”)，这是因为打包之后外部引入JS和CSS文件时，如果路径以“/”开头，在本地无法找到对应的文件(在服务器上没有问题)。所以如果需要在本地打开打包后的文件，就得修改文件路径。

5.2 项目的打包与发布

对vue项目进行打包

npm run build

5.2.1 使用静态服务器工具包发布打包

serve dist

5.2.2 使用动态web服务器(Tomcat)发布打包

• 打包

npm run build

• 将dist文件夹复制到Tomcat的webapps目录下，修改dist文件夹为项目名称
• 启动Tomcat，使用浏览器访问输出的地址(Tomcat默认端口号为8080)

http://localhost:8080/vue-project/#/

5.3 Vue-devtools

在开发时经常要观察组件实例中data属性的状态，方便进行调试，但一般组件实例并不会暴露在window对象上，无法直接访问内部的data属性，若只通过debugger进行调试则效率太低。所以vue官方推出一款Chrome插件vue-devtools，vue-devtools是一款基于Chrome浏览器的插件，用于调试Vue应用，可以极大效率提高调试效率。

5.3.1 Vue-devtools安装

1. 通过GitHub下载vue-devtools库

git clone https://GitHub.com/vuejs/vue-devtools

2. 在vue-devtools目录下安装依赖包(耗时较长)

cd vue-devtools npm install

3. 编译项目文件

npm run build

4. 修改manifest.json文件，把"persistent":false改成"persistent"：true。路径是：自定义路径\vue-devtools\shell\chrome>manifest.json。
5. 使用谷歌浏览器在地址输入栏输入chrome://extensions/进入插件界面。单击“加载已解压的扩展程序”按钮，选择dev-tools>shells>chrome放入。

5.3.2 Vue-devtools的使用

当添加完Vue-devtools扩展程序后，在调试Vue应用的时候，打开F12，在Chrome开发者工具中会看到一个Vue栏，单击之后就可以看到当前页面Vue对象的一些信息。Vue是通过数据驱动的，这样就能看到对应的数据了，方便进行调试。

效果如下：