vue2.x开发及打包的问题 ——跨域、图片、css和cdn优化

注:  这是2.0+版本的vue-cli

1、打包不把图片转为base64

最近做了个小项目，打包时发现图片给我生成两个而且有些还转为base64了，即使修改了 limit值还是会改，很是烦人，最后解决办法，

前端处理，保留原来的ttf,eot等字体文件图片文件名，只用file-loader进行处理，不使用url-loader，修改build文件夹下面的webpack.base.conf.js文件中

如果使用字体，最好也修改问 file-loader

2、打包后图片不见了，一看是地址不对

找到 build下 utils.js  改完 ../../ 如果需要cdn 则把这个路径改成 cdn图片路径

3、css路径问题 将此处改为 ./  或者 cdn线上路径

4、跨域问题本地开发代理

加上红色箭头 马赛克改成你需要请求的地址，（因为这是我公司开发的地址，所以我就打马赛克了）

5、开发优化问题，比如 vue axios 还有elemui...这些是有cdn连接的，没必要在打包进去

这时需要先准备好 开发和生产的 文件即 dev.js main.js  dev.html  index.html

找到build 下的webpack.base.config.js  externals里面配置，就是打包不会打进去，这里我用

process.env.NODE_ENV 来判断是 开发还是生产环境，就不需要来回切换了

只需要 npm run dev 就是开发时，npm run build 就是上线的时候打包

左侧index（npm run build） 右侧dev.html（npm run dev）  

index.html 引入cdn        dev.html 则不需要

左侧 main.js   右侧 dev.js 

把不需要的注释掉

转载于:https://juejin.im/post/5bebde32f265da610e7fa47d