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

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

vue 项目从 dev 切换到 prod 时有很多地方需要注意;

  1. 首先是大家最需要注意的 ajax 切换环节

    以前一开始用 Vue 的时候我是在 build 之后,手动修改 ajax 的请求前缀

    比如现在我使用的 axios,

    axios.defaults.baseURL = 'api'

    但是打包的时候一般都要改动 url,直到我后来知道了 process.env 这个对象,

    使用他可以获取当前的环境(后续还会提到,如何修改这个对象)

    之后就可以轻松的修改 ajax 的基础路径了:

    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改为:

    productionSourceMap:false

    在 build 之前需要检查一下该属性;

  4. 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'
    })
  5. 添加自定义的全局变量:

    /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)需要注意的一些事的更多相关文章

  1. Vue+elementUI build打包部署后字体图标丢失问题

    错误描述:Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...

  2. Vue打包后出现一些map文件

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行  cnpm run build  开始 ...

  3. cordova+vue打包webapp

    使用cordova+vue打包webapp,可以快速给网页套上一个android和ios壳子,完成一个app的开发. 1. 环境准备. (1)node.js  下载地址: https://nodejs ...

  4. Vue打包优化之分析工具webpack-bundle-analyzer

    // 1. 安装 cnpm install webpack-bundle-analyzer --save-dev // 2. 在/build/webpack.prod.conf.js文件中引入 con ...

  5. vue打包以及在Apache环境下的配置

    vue打包,我们都清楚,实在记不住命令的可以去package.json中看: npm run build 打包后会生成dist文件夹,将dist文件夹下的所有文件复制到Apache下的www的文件夹下 ...

  6. vue打包静态资源路径不正确的解决办法

    vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...

  7. vue打包后运行在本地/非服务器端环境的访问路径

    vue打包前的配置: 项目目录下--> config文件夹---> index.js: build:  { assetsPublickPath:  './',   // 设置成相对路径   ...

  8. vue打包后出现一些map文件的解决方法

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行  cnpm run build  开始 ...

  9. Vue打包后页面出现cannot get

    学习Vue有大半个月了,然而遇到了不少坑,完全没有高手们那么容易,中间有不少值得记录下的东东,回头好好理理.先理下今天的: Vue打包命令简单啊,直接在命令行输入:npm run build 然而没一 ...

随机推荐

  1. 九度oj 题目1205:N阶楼梯上楼问题

    题目1205:N阶楼梯上楼问题 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:4990 解决:2039 题目描述: N阶楼梯上楼问题:一次可以走两阶或一阶,问有多少种上楼方式.(要求采用 ...

  2. multi cookie & read bug

    js cookie multi cookie & read bug document.cookie; // "access_token_test=eyJhbGciOiJIUzI1Ni ...

  3. [luoguP1086] 花生采摘(模拟)

    传送门 模拟... 代码 #include <cstdio> #include <iostream> #include <algorithm> #define ab ...

  4. HDU——1285 确定比赛名次

    确定比赛名次 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  5. Dubbo 2.7.1 踩坑记

    Dubbo 2.7 版本增加新特性,新系统开始使用 Dubbo 2.7.1 尝鲜新功能.使用过程中不慎踩到这个版本的 Bug. 系统架构 Spring Boot 2.14-Release + Dubb ...

  6. JSP操作

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/actions.html: JSP操作(Action)使用XML语法结构来控制Servlet引擎的行为.可 ...

  7. MongoDB小结21 - find【游标】

    数据库使用游标来控制find的执行结果. 客户端对游标的实现通常能够对最终结果进行有效控制. 可以限制结果的数量,略过部分结果,对任意方向任意键的组合对结果进行排序,或者去执行一些功能强大的操作. 我 ...

  8. 在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片

    很多时候,在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片.可以通过以下方式: <img src="xxx.jpg" onError="th ...

  9. 【python自制】让大白成为你的个人助手!

    我做这个软件就是要让卖萌进行究竟! 官方站点:http://www.jackeriss.com/companions.htm GitHub:https://github.com/Jackeriss/C ...

  10. HDU 5402 Travelling Salesman Problem (构造)(好题)

    大致题意:n*m的非负数矩阵,从(1,1) 仅仅能向四面走,一直走到(n,m)为终点.路径的权就是数的和.输出一条权值最大的路径方案 思路:因为这是非负数,要是有负数就是神题了,要是n,m中有一个是奇 ...