Vue前后端分离运用实践中遇到的坑

Vue是一套构建用户界面的渐进式框架，只关注视图层，采用自底向上增量开发的设计，目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件，易于学习上手，主流前端框架。以下是博主在一次从学习到项目运用过程中的经验总结。

一、多环境打包部署配置-测试环境

一般使用vue-cli脚手架创建的vue工程中都会有一个打包的配置目录build，其中对开发环境编译运行和生产环境打包做了相关配置，如果需要自定义测试环境的打包，我们把build.js复制一份，改名为bulid.test.js作为测试环境打包的总入口，同时复制一份webpack.prod.conf.js---->webpack.test.conf.js，修改成测试环境的相应配置即可。最后在config/index.js中增加如下配置

  buildtest: {

    index:path.resolve(__dirname, '../dist/index.html'),

    assetsRoot:path.resolve(__dirname, '../dist'),

    assetsSubDirectory:'static',

    assetsPublicPath:'./',

    productionSourceMap:true,

    devtool:'#source-map',

    productionGzip:false,

    productionGzipExtensions: ['js', 'css'],

    bundleAnalyzerReport:process.env.npm_config_report

  },

这里对几个比较重要的配置做下说明：

1. assetsPublicPath：打包后引用的静态资源位置，这里使用的是相对路径，生产环境部署的时候如果需要把静态资源部署到cdn上，这个配置改为所在cdn的绝对路径即可。

2. productionSourceMap：打包以后是否保留源码map，测试环境为了调试方便，这里选择true，生产环境为了安全需要，建议配置成false。最终打包结果的区别在于是否有下图中的map文件

测试环境配置完成以后，在package.json的scripts对象中增加

"buildtest": "nodebuild/build.test.js"

然后就可以使用npmrun buildtest命令来进行测试环境的打包了。

二、打包静态资源缓存问题

修改下图中的HtmlWebpackPlugin中的hash属性为true

newHtmlWebpackPlugin({

     filename:process.env.NODE_ENV === 'testing'

       ? 'index.html'

       : config.build.index,

     template:'index.html',

     inject:true