vue项目简书(三)--打包部署

三人一组的饿了么项目随着答辩结束至此收尾结束. 项目打包开始.

vue项目打包部署

1. 终端进入vue项目路径,执行打包命令 npm run build

此时如果没报错就是打包完成.

2.点击index.html，通过浏览器运行，当然会不出意料的报错啦,不要急,下面要进行具体的文件修改,具体步骤如下:

a、查看package.json文件的scripts命令

b,开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件

c、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。

d、终端运行 npm run build 即可。

此时点击index.html，通过浏览器运行(如果发现动态绑定的static的图片找不到，故static必须使用绝对路径。将图片路径修改为绝对路径),至此，打包完成。

参考博客: https://blog.csdn.net/qq_41115965/article/details/80796310

3. 当我第一眼看到项目真的是满心欢喜,哇哇哇,终于成功了,可是随之而来的就是一个大bug, 本来运用了elementUi的图标,评分的星星都不见了,好吧,只能继续搜博客,解决问题. 解决Vue项目打包后图标没有正常显示的问题 此时我们只需要找到build/util.js文件，在 'vue-style-loader' 之后加一行：publicPath: '../../'，就可以解决问题了。

重新打包之后，打开index.html，图标什么的一切正常啊！成功!

vue上传服务器

vue项目打包后就要上传服务器了,我这里上传的是新浪云的服务器.

1. 在控制台点开'云应用SAE',创建应用. 依次选择, PHP ,标准环境, 5.6, Git,二级域名一级应用名称自己取名(建议取一样的名字,好记.)

2. 在左侧进入 运行环境管理 的 代码管理,在右侧创建新版本.

3. 进入Git仓库信息,复制仓库地址,在SourceTree里克隆下来.

4. 将打包之后的dist文件夹在SourceTree里推送到新浪云服务器.

5. 新建版本页面点击右侧 '在线编辑' 就会有dist文件夹,右键点击index.html文件,通过url访问,OK,完工.

你可以将地址栏的地址发给别人啦!

哎哎哎,成功了别急着走啊,还有更简单的方法上传服务器哦.

1.上述第1,2条.

2.直接点击页面右侧 '上传代码' ,直接上传你的dist文件夹也可以哦.

3. 上述第5条.

下面再说一个在项目中应用elementui插件的小困难.

饿了么项目中的评分直接用来这个插件里的评分,当时用了之后一直没能修改它的大小, 困惑我许久,搜了大量博客,大多都是无法解决,本身无法改变.只能自适应, 好吧,我也是今天才知道了一种方法可以改变他的大小.

之前搜博客也了解没办法在vue子页面写样式,所有需要在根组件App.vue页面进行全局操作.

1.elementUi评分 的代码是这样的

<el-rate
    v-model="item.rating"
    disabled
    disabled-void-color="#ccc"
    show-score
     text-color="#ff9900"
     class="ele">
</el-rate>

进入页面F12发现星星评分的类名就是el-rate, 既然又不能设置局部样式,那不就简单啦, App.vue的style样式里,直接设置它的样式就好了啊.

.el-rate{
  width: 2rem
  font-size:.3rem
}