phpstorm上传vue-cli项目到网站服务器

                                            phpstorm开发vue-cli并上传服务器

        怎么开发vue-cli项目这里不多做叙述,这里只交代完成cli项目之后怎么上传到网站服务器。

1.在你使用phpstorm完成cli项目之后,打开终端,输入npm run build


phpstorm上传vue-cli项目到网站服务器_第1张图片

2.等待一段时间,它会自动帮你打包生成一个叫dist的文件夹。


phpstorm上传vue-cli项目到网站服务器_第2张图片

dist已经帮你把所有项目文件都打包好了,你要做的就是把dist上传到网站服务器就行。

3.登录宝塔,添加站点,上传文件。


phpstorm上传vue-cli项目到网站服务器_第3张图片
登录宝塔,添加站点

点击提交之后,页面就会多一个域名


phpstorm上传vue-cli项目到网站服务器_第4张图片

然后点击文件,打开你域名相对应的文件


phpstorm上传vue-cli项目到网站服务器_第5张图片

默认有许多说明文档,地址栏输入你刚刚创建的这个域名,看看是否显示添加站点成功。


phpstorm上传vue-cli项目到网站服务器_第6张图片

然后,把域名对应的文件里的文件都删除。


phpstorm上传vue-cli项目到网站服务器_第7张图片

删完之后,打开phpstorm配置本地文件与网站文件同步。


phpstorm上传vue-cli项目到网站服务器_第8张图片

切记咱要传的是dist文件。


phpstorm上传vue-cli项目到网站服务器_第9张图片
phpstorm配置与服务器同步

第二步:


phpstorm上传vue-cli项目到网站服务器_第10张图片
配置根路径

第三步:


phpstorm上传vue-cli项目到网站服务器_第11张图片
防止目录递归




phpstorm上传vue-cli项目到网站服务器_第12张图片

点击ok后右侧会出现你所上传的文件目录,点击右键


phpstorm上传vue-cli项目到网站服务器_第13张图片
自动更新到服务器

打开宝塔,在网站文件中就会出现你上传的目录。


phpstorm上传vue-cli项目到网站服务器_第14张图片

现在在地址栏输入你的域名就会看到vue-cli的项目。


phpstorm上传vue-cli项目到网站服务器_第15张图片

第一次写,有点疏漏,大家谅解哈,都是php爱好者,欢迎来交流啊。

你可能感兴趣的:(phpstorm上传vue-cli项目到网站服务器)