新手养成流---前端部署服务器

前端vue项目怎么顺利部署到服务器上呢，浅浅分享一波嗷

前提：项目已经初步开发完毕，可以提交给测试了，此时需要部署服务器上。

1 运行npm run build或者yarn build对项目进行编译打包，正常来说第一步都是如此，而我们也一样，但是在此之前我们可以先检查以下几点，以便更顺利打包完成。

（1）你的index.html文件夹是否已在public文件目录之下，index.html是项目唯一的入口，也是引入静态资源的地方，打包之前请务必检查好。

（2）找到静态资源assets文件，img下的所有图片命名都是使用英文或者拼音表示，不能使用中文，不能使用中文，不能使用中文，中文打包到线上后会显示出错

(3)如果项目部署后有404问题（打包后的dist没有放到服务器的根目录下），请参考此条，为了正常部署，所以我放到了提前检查这里，找到vue.config.js文件找到build.assetsPublicPath，将"/“修改成”./"

(4)关于路由模式的问题，很多小伙伴直接打包后都会出现页面空白问题，不明所以，其实很简单，就是你的路由没有找到对应的页面，即使你的路由配置好了再本地没问题，但是线上依旧会出错，这个时候请去检查一下路由模式是否正确。简单来说我们经常使用的路由模式有两种history和hash模式，区分很简单，地址栏中带“#”的就是hash模式（经常被吐槽不美观，哈哈哈），但是也是最简单的配置模式，所以本人是经常用的。

如果你的页面出现问题，就可以去检查一下，注意如果是history模式是需要后端配合的，只有hash模式不用后端可以正常显示。

（5）接口地址。如果你之前的开发接口地址是本地地址，那么在这里就不要忘了，把本地地址改为线上地址（也让后端将接口上传服务器），在生产环境也就是线上的文件里更换上线上的接口地址，打包时会使用这个。

2 打包成功之后会生成一个dist或者build文件夹（可以在vue.config.js文件自定义命名）

3 最后一步，在服务器上新建目录并且把我们打包的dist或者build文件夹放进去即可，最后生成的线上地址就是服务器地址前缀加上我们路由地址。

今天的分享就到这里啦，祝每一个小伙伴都可以顺利部署，顺利上线，没有bug,哈哈哈，打工不易，路过留痕嗷~