Vue项目入门教程12-打包发布

系列文章：

• Vue项目入门教程1-项目介绍
• Vue项目入门教程2-Vue-cli搭建项目
• Vue项目入门教程3-项目改造
• Vue项目入门教程4-插件安装
• Vue项目入门教程5-Svg图标
• Vue项目入门教程6-数据mock
• Vue项目入门教程7-首页布局
• Vue项目入门教程8-首页数据
• Vue项目入门教程9-文章详情页
• Vue项目入门教程10-搜索页面
• Vue项目入门教程11-我的页面及其他
• Vue项目入门教程12-打包发布

项目打包

测试环境打包：npm run build:sit
正式环境打包：npm run build:prod

运行打包命令，会将所有代码打包到dist/目录，将该目录下文件上传到虚拟主机根目录下即可

资源路径问题

打包后的文件需要直接放在虚拟主机目录中
如果放在虚拟主机目录的子目录中，会出现js等资源文件访问不到的问题。需要将绝对路径修改为相对路径

• 修改config/index.js文件，找到build/assetsPublicPath

build: {
    // ...
    assetsPublicPath: './',
    // ...
}

• 修改build/utils.js文件，增加一行

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    // 增加一行
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

样式问题

1、打包后样式发生了变化，排除发现打包后的代码下列两处发生了变化：

• .page的样式-webkit-box-orient: vertical;丢失
• .page .container的样式-webkit-box-flex: 1;丢失

造成此现象的原因是webpack打包时会先去掉带有特殊前缀的样式-webkit-*、-moz-*、-o-*、-ms-*等，然后再根据需要自动添加这些前缀

可以使用下面方法解决：

/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

/*! autoprefixer: off */
-webkit-box-flex: 1;
/* autoprefixer: on */

但上面这种解决办法在开发环境会有warning

此项目的解决办法是将这两个样式写在页面的行内样式中

2、打包后文章详情页不能滚动了
排除发现是.container这里设置了overflow: hidden;
虽然给.article设置了overflow: auto;，但优先级不够。需要设置成overflow: auto !important;