小记 vue 打包(build)须要注意的一些事

记录 vue 项目打包的一些事情

首先声明项目都是由 vue-cli 生成;

vue 项目从 dev 切换到 prod 时有不少地方须要注意;

1. 首先是你们最须要注意的 ajax 切换环节
   之前一开始用 Vue 的时候我是在 build 以后,手动修改 ajax 的请求前缀
   好比如今我使用的 axios,
   js axios.defaults.baseURL = 'api'
   可是打包的时候通常都要改动 url,直到我后来知道了 process.env 这个对象,
   使用他能够获取当前的环境(后续还会提到,如何修改这个对象)
   以后就能够轻松的修改 ajax 的基础路径了:
   js axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'api' : ''
   使用该方法可以无需在打包时修改路径,更好地配合 webpack 的 proxyTable;

2. 与 1 相似的 Vue.config.devtools 一样地使用 process 来解决这个问题,

   Vue.config.devtools = process.env.NODE_ENV === 'development'

   该属性是是否可以打开 vue 的 devTools;

   某个小有名气的网站,vue 上线的时候,仍是 dev 环境,你们引觉得戒吧
   

3. sources里的 webpack://

   你们在运行程序的时候能够打开 chrome 的 sources 点击 webpack:// 能够发现这个对象里,有全部在运行的组件,资源的源码;
   这个是为了在 debug 的时候调试,然而在 build 以后这个仍然会存在与 sources 中留下很大的隐患;

   而解决这个的方法就是在 /config/index.js 文件下 build 对象中的productionSourceMap改成:
   js productionSourceMap:false
   在 build 以前须要检查一下该属性;

4. build 以后须要相对路径的引用:

   也许你们都知道了,在通常项目 build 以后都会生成一个 index.htm 文件和 一个 static 文件夹,而 static 这个文件夹须要被放置在根目录下,
   index.html 会在决定路径下引用该文件
   若是须要添加模块的话,只须要在 /config/index.js 文件下的 build 对象下,修改 assetsSubDirectory 属性为:
   js assetsSubDirectory: 'static/[模块名]'
   不少人引用图片, css 时也都是在 static 文件夹里面引用的,因此绝对引用也没有太多的问题;
   回到正题,若是图片,css 都是在 assets文件里面, build 以后的文件须要相对路径的引用,这个状况也是比较多的:
   assetsSubDirectory这个属性能够像我上面说的那样,再修改 assetsPublicPath 为 './'

   若是还有终极的引用需求,好比我碰到的这个:
   index.html 放置在根目录的模块文件夹下, static 须要放置在根目录的公共static下的模块文件夹下,
   这里须要改的话会比较麻烦,不过我估计没什么人会和我同样碰到这样的要求,
   我就简单讲下,先是修改 /build/webpack.base.conf.js里图片的引用方式,再修改 /build/utils.js里的 assetsPath 函数,使其碰到图片的引用时,添加对应的路径便可;
   特别说明:
   打包后,若是你须要使用相对路径来引用,js,css,图片等资源,并且图片是放在assets中的,那么你必定会碰到图片引用错误的状况,
   解决该状况也比较容易:
   在 build/utils.js 中大概第47行的样子,修改 ExtractTextPlugin.extract 为:
   return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', // 仅添加该行便可 fallback: 'vue-style-loader' })

5. 添加自定义的全局变量:

   在 /build/webpack.dev.conf.js 文件下找到 plugins 里的 DefinePlugin 以下,添加测试:
   js new webpack.DefinePlugin({ 'process.env': require('../config/dev.env'), 'myTest':true })
   从新启动项目,在 main.js 里面打印该属性:
   js console.log(myTest) // true
   能够发现 console 里输出了该属性的值 true,一样地在 /build/webpack.prod.conf.js 文件下也能够添加全局变量,
   能够经过改方法来替换本文中 1 里的功能,能够直接改变全局变量,而不是用当前环境来判断;

若是须要压缩vendor文件,能够看我另外一篇博客 http://www.javashuo.com/article/p-xozsrrjk-eu.html
基本就这样了,可能还有不完善的地方,若是我发现后续还会再加上;

完