zoukankan      html  css  js  c++  java
  • 小记 vue 打包(build)需要注意的一些事

    记录 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
    基本就这样了,可能还有不完善的地方,如果我发现后续还会再加上;

  • 相关阅读:
    Asp.Net Core 2.0 项目实战(11) 基于OnActionExecuting全局过滤器,页面操作权限过滤控制到按钮级 郑州
    NET项目反编译+VS解决方案整理流程 郑州
    iis 目录枚举文件枚举解决方案 郑州
    Asp.Net Core 2.0 项目实战(10) 基于cookie登录授权认证并实现前台会员、后台管理员同时登录 郑州
    SqlServer mssql 按月统计所有部门 郑州
    无法获得数据库 'model' 上的排他锁 解决方法 郑州
    Asp.Net Core 2.0 项目实战(5)Memcached踩坑,基于EnyimMemcachedCore整理MemcachedHelper帮助类。 郑州
    谈谈前端怎样布局切图,程序可以方便快捷添加程序 郑州
    各种UIColor颜色的设置
    iOS
  • 原文地址:https://www.cnblogs.com/Grewer/p/8847636.html
Copyright © 2011-2022 走看看