phpstorm上传vue-cli项目到网站服务器
phpstorm开发vue-cli并上传服务器
怎么开发vue-cli项目这里不多做叙述,这里只交代完成cli项目之后怎么上传到网站服务器。
1.在你使用phpstorm完成cli项目之后,打开终端,输入npm run build
文章图片
2.等待一段时间,它会自动帮你打包生成一个叫dist的文件夹。
文章图片
dist已经帮你把所有项目文件都打包好了,你要做的就是把dist上传到网站服务器就行。
【phpstorm上传vue-cli项目到网站服务器】3.登录宝塔,添加站点,上传文件。
文章图片
登录宝塔,添加站点 点击提交之后,页面就会多一个域名
文章图片
然后点击文件,打开你域名相对应的文件
文章图片
默认有许多说明文档,地址栏输入你刚刚创建的这个域名,看看是否显示添加站点成功。
文章图片
然后,把域名对应的文件里的文件都删除。
文章图片
删完之后,打开phpstorm配置本地文件与网站文件同步。
文章图片
切记咱要传的是dist文件。
文章图片
phpstorm配置与服务器同步 第二步:
文章图片
配置根路径 第三步:
文章图片
防止目录递归
文章图片
点击ok后右侧会出现你所上传的文件目录,点击右键
文章图片
自动更新到服务器 打开宝塔,在网站文件中就会出现你上传的目录。
文章图片
现在在地址栏输入你的域名就会看到vue-cli的项目。
文章图片
第一次写,有点疏漏,大家谅解哈,都是php爱好者,欢迎来交流啊。
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 如何在手机上查看测试vue-cli构建的项目
- iview|iview upload 动态改变上传参数
- Spring|Spring Cloud Feign实现文件上传下载的示例代码
- 文件上传与Koa2
- thinkphp3.2下实现阿里云视频点播实例(客户端JavaScript上传)
- 微信小程序上传图片的方法
- 命令行上传小程序版本至微信后台
- 如何将图片上传到七牛云平台()
- vue-cli2和vue-cli3的区别