小记 vue 打包(build)需要注意的一些事
记录 vue 项目打包的一些事情
首先声明项目都是由 vue-cli 生成;
vue 项目从 dev 切换到 prod 时有很多地方需要注意;
首先是大家最需要注意的 ajax 切换环节
以前一开始用 Vue 的时候我是在 build 之后,手动修改 ajax 的请求前缀
比如现在我使用的 axios,axios.defaults.baseURL = 'api'
但是打包的时候一般都要改动 url,直到我后来知道了
process.env
这个对象,
使用他可以获取当前的环境(后续还会提到,如何修改这个对象)
之后就可以轻松的修改 ajax 的基础路径了:axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'api' : ''
使用该方法能够无需在打包时修改路径,更好地配合 webpack 的 proxyTable;
与 1 类似的
Vue.config.devtools
同样地使用process
来解决这个问题,Vue.config.devtools = process.env.NODE_ENV === 'development'
该属性是是否能够打开 vue 的 devTools;
某个小有名气的网站,vue 上线的时候,还是 dev 环境,大家引以为戒吧
sources里的
webpack://
大家在运行程序的时候可以打开 chrome 的 sources 点击
webpack://
可以发现这个对象里,有所有在运行的组件,资源的源码;
这个是为了在 debug 的时候调试,然而在 build 之后这个仍然会存在与 sources 中留下很大的隐患;而解决这个的方法就是在
/config/index.js
文件下 build 对象中的productionSourceMap
改为:productionSourceMap:false
在 build 之前需要检查一下该属性;
build 之后需要相对路径的引用:
也许大家都知道了,在一般项目 build 之后都会生成一个 index.htm 文件和 一个 static 文件夹,而 static 这个文件夹需要被放置在根目录下,
index.html 会在决定路径下引用该文件
如果需要添加模块的话,只需要在/config/index.js
文件下的 build 对象下,修改assetsSubDirectory
属性为: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'
})
添加自定义的全局变量:
在
/build/webpack.dev.conf.js
文件下找到plugins
里的DefinePlugin
如下,添加测试:new webpack.DefinePlugin({
'process.env': require('../config/dev.env'),
'myTest':true
})
重新启动项目,在
main.js
里面打印该属性:console.log(myTest) // true
可以发现 console 里输出了该属性的值
true
,同样地在/build/webpack.prod.conf.js
文件下也可以添加全局变量,
可以通过改方法来替换本文中 1 里的功能,可以直接改变全局变量,而不是用当前环境来判断;
如果需要压缩vendor文件,可以看我另一篇博客 https://www.cnblogs.com/Grewer/p/9033530.html
基本就这样了,可能还有不完善的地方,如果我发现后续还会再加上;
完
小记 vue 打包(build)需要注意的一些事的更多相关文章
- Vue+elementUI build打包部署后字体图标丢失问题
错误描述:Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...
- Vue打包后出现一些map文件
Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行 cnpm run build 开始 ...
- cordova+vue打包webapp
使用cordova+vue打包webapp,可以快速给网页套上一个android和ios壳子,完成一个app的开发. 1. 环境准备. (1)node.js 下载地址: https://nodejs ...
- Vue打包优化之分析工具webpack-bundle-analyzer
// 1. 安装 cnpm install webpack-bundle-analyzer --save-dev // 2. 在/build/webpack.prod.conf.js文件中引入 con ...
- vue打包以及在Apache环境下的配置
vue打包,我们都清楚,实在记不住命令的可以去package.json中看: npm run build 打包后会生成dist文件夹,将dist文件夹下的所有文件复制到Apache下的www的文件夹下 ...
- vue打包静态资源路径不正确的解决办法
vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...
- vue打包后运行在本地/非服务器端环境的访问路径
vue打包前的配置: 项目目录下--> config文件夹---> index.js: build: { assetsPublickPath: './', // 设置成相对路径 ...
- vue打包后出现一些map文件的解决方法
Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行 cnpm run build 开始 ...
- Vue打包后页面出现cannot get
学习Vue有大半个月了,然而遇到了不少坑,完全没有高手们那么容易,中间有不少值得记录下的东东,回头好好理理.先理下今天的: Vue打包命令简单啊,直接在命令行输入:npm run build 然而没一 ...
随机推荐
- 动态规划法解最长公共子序列<算法分析>
一.实验内容及要求 1.要求按动态规划法原理求解问题: 2.要求在20以内整数随机产生两个序列数据: 3.要求显示随机产生的序列及最长公共子序列.二.实验步骤 1.随机产生数列: 2.输出随机序列: ...
- VIM使用技巧14
经常使用vim的童鞋可能会注意到,实际操作过程中,处于插入模式中是非常少的,更多的是查看和浏览,偶尔修改即可.因此,快速从插入模式退出进入普通模式,就显得非常重要.主要有以下四种方式: 一.在插入模式 ...
- Spring Boot 2.1.5 正式发布,1.5.x 即将结束使命!
Spring Boot 官网在 2019/03/15 这天发布了 Spring Boot 2.1.5 正式版,栈长表示真跟不上了.. 官宣如下 : https://spring.io/blog/201 ...
- Java利用jacob实现文档格式转换
实现文档格式之间的转换,我使用的是jacob-1.7版本,需要jacob.jar来调用activex控件,本机需安装WPS/office,还需要jacob.jar以及jacob.dll 其中: ...
- How to force immediate stop of threads in Jmeter servers如何在jmeter执行完,立即停止jmeter
https://stackoverflow.com/questions/38900315/how-to-force-immediate-stop-of-threads-in-jmeter-server ...
- 从头认识Spring-2.3 注解装配-@autowired(4)-required(2)
这一章节我们来继续具体讨论一下@autowired里面的參数required.在多构造器注入的情况. 1.domain(重点) 蛋糕类: package com.raylee.my_new_sprin ...
- 手游产品经理初探(二)从营销角度看loading界面
近期開始写产品相关的专题,准备从细节入手去思考.总结一些不为人注意的细节地方. 今天给大家分享的是游戏里面都有的loading界面. 还是从几个在Facebook上排名靠前的Casino游戏的load ...
- php把时间计算成几分钟前,几小时前,几天前的函数
function time_tran($the_time){ $now_time = date("Y-m-d H:i:s",time()+8*60*60); $now_time = ...
- java.io.IOException: read failed, socket might closed or timeout, read ret: -1
近期项目中连接蓝牙之后接收蓝牙设备发出的指令功能,在连接设备之后,创建RfcommSocket连接时候报java.io.IOException: read failed, socket might c ...
- Android官方api的下载
不少开发者,都需要api来进行参考,可是目前Android开发来说默认是没有下载的, 而且sdk中有时候部分开发者也很疑惑怎么没有找到像document或者doc之类的文档进行下载,其实我们只要在把s ...