vue 项目中使用npm来进行
npm run build
或者直接使用VS来操作
- 在VUE文件中找到package.json文件
- 点击蓝色字体的"调试"
-
选择build开头的就代表的是在打包(注意:我这里有两个是因为一个是测试环境一个正式环境,所以我们打包时一定要清楚自己是打包什么环境下的)
image.png
如何查看多个build的情况下哪个是测试环境哪个是正式环境呢,已我自己的为例,当然是查看接口请求是dev测试环境下还是api正式环境下
image.png
我有三个存环境的地方,其中我在点击调试后出现的两个build中,
build:prod --查看env第二个,里面是正式环境的
build:stage --查看env第三个,里面是测试环境的
所以在打包时根据自己的需求来进行打包哪个环境下的vue项目
打包成功后
打包成功后,在vue文件中会自动生成一个'dist'的文件夹,这个就是打包后的文件,
image.png
部署到FileZilla上
打开软件FileZilla,需要先连接上,点击右上边的'快速连接'或者'倒三角中的连接地址'(反正需要确保连接成功,才能进行下一步)
-
将打包好的dist文件内容部署到对应位置,
连接成功后
右下角一块时各类的文件名(首先需要先回退一下,可以点击最上面的两个点回退一下)
回退后-点击home文件-点击www文件-找到对应的文件夹
-
然后将文件中的这三个文件给替换掉或者将旧的存到自己新建的old文件夹中,然后将新打包的文件丢进去就好了
image.png
