专栏首页艺述思维vue 开发常用工具及配置三

vue 开发常用工具及配置三

本文大约 3000 字。

目录

  • 1,选择构建工具
    • 1.1 Gulp
    • 1.2 Webpack
    • 1.3 选择 Gulp 还是 Webpack?
  • 2,在 vue.config.js 中配置文件压缩选项
  • 3,使用环境变量
  • 4,使用别名
  • 5,使用全局 less 变量
  • 源码
  • 参考链接

1,选择构建工具

在现在的前端开发中,前后分离、模块化、版本控制、文件合并与压缩、mock数据等,是在大前端开发避不开的概念。在开发的时候,以组件的方式分别开发,在部署的时候又将这些代码、图片、样式等资源优雅地合并成模块并以增量、热更新的方式加载到浏览器中,这样的模块化方案一直是前端架构师在解决和优化的焦点之一。

1.1 Gulp

美 [ɡʌlp]

Gulp就像是一个产品的流水线,整个产品从无到有,都要受流水线的控制,在流水线上我们可以对产品进行管理。

Gulp是对整个过程进行控制,在其配置文件gulpfile.js中配置的每一个task。例如:对sass文件进行预编译:

gulp.task('sass',function(){
    gulp.src('src/styles/*.scss')
    .pipe(sass().on('error',sass.logError))
    .pipe(gulp.dest('./build/prd/styles/'));//编译后的输出路径
});

上面这个task可以对'src/styles/*.scss'目录下的所有以.scss结尾的文件进行预处理。

1.2 Webpack

Webpack 是当下最热门的前端打包工具。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader的转换,任何形式的资源都可以视作模块,包括但不限于js代码、CSS、图片、JSON文件等。

Webpack是根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

entry: {
  app:__dirname + "/src/scripts/app.js",
}

在配置文件webpack.config.js/entry配置的入口文件,从这里进去,一级一级查找,遇到什么类型的文件,就调用对应的 loader。

1.3 选择 Gulp 还是 Webpack?

稍做一番对比之后,决定使用Webpack。列举一些理由:

  1. Gulp 倾向于管理前端开发整个过程,而 Webpack 专注的只是整个开发流程中的一环。一个多,一个少,貌似应该选择 Gulp,其实不然。管的多,束缚也多。整个开发流程与公司、团队、项目都是有密切关系的,每个公司的需求都不太一样。最好是使用束缚少的工具框架。
  2. Gulp 对 js 文件的模块化工作是通过Webpack实现的,具体是通过安装 gulp-webpack 及相关 loader 模块进行js模块化管理的。这不奇怪,因为Gulp本身就不是要与 Webpack 竞争模块打包,Gulp志在流程线化管理。
  3. Gulp可以对 css、js 文件进行合并与压缩,而 Webpack可以实现对css、js、html、图片文件等进行合并与压缩,还可以对js文件进行编译,如es6->es5等。后者功能更全面,更强大一些。
  4. 处理js、css压缩,Webpack已经内置了功能,Gulp需要第三方插件。
  5. Webpack一直在用,文档教程等资源积累较多。

2,在 vue.config.js 中配置文件压缩选项

针对js和css文件的压缩,Webpack已经内嵌了uglifyJS来完成对js与css的压缩混淆,无需引用额外的插件。我们只需要在 Webpack 配置文件中的 plugins 属性中做如下配置:

plugins: [
   new webpack.optimize.UglifyJsPlugin({ //压缩代码
      compress: {
        warnings: false
      },
      except: ['$super', '$', 'exports', 'require'] //排除关键字
  })
]

压缩的时候需要排除一些关键字,不能混淆,比如$或者require,否则会影响到代码正常运行。

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead

有人讲,报错的原因是webpack4已经升级不支持这种写法了。不在plugins里面进行配置,取而代之放在了optimization下面。在vue cli3创建的项目中,在vue.config.js中仍然可以使用UglifyJsPlugin插件。

安装插件:

yarn add uglifyjs-webpack-plugin

在vue cli3创建的项目中,webpack.config.js行使的职责,现在由vue.config.js接管了。以上相同配置可以这样完成:

const IS_PRD = ['production', 'prod'].includes(process.env.NODE_ENV);
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  configureWebpack: config => {
    if (IS_PRD) {
      const plugins = []
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: true,
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log'] //移除console
            },
     except: ['$super', '$', 'exports', 'require'], //排除关键字
            mangle: false,
            output: {
              beautify: true,//压缩注释
            }
          },
          sourceMap: false,
          parallel: true,
        })
      )
      config.plugins = [...config.plugins, ...plugins]
    }
  },
...

代码较长,具体可下载源码查看。

3,使用环境变量

使用环境变量的好处,是显而易见的,可以让开发者分别在测试环境、开发环境和生产变量使用不同的配置信息,而这些信息是自动通过配置区分的,并不需要在测试部署或上线部署前修改。

vue cli3支持环境变量,不同的文件名在不同模式下被自动引用:

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

并且模块是与编译任务自由匹配的,不需要显式通过--mode再显式声明:

development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit

这里存在override规则。变量文件充许以一定的规则被覆盖掉。例如,假设新增了一个Staging 模式,工程中包括以下 env 文件:

.env文件:

VUE_APP_TITLE=My App

和 .env.staging 文件:

NODE_ENV=production
VUE_APP_TITLE=My App (staging)

vue-cli-service build 会加载可能存在的 .env、.env.production 和 .env.production.local 文件,然后构建出生产环境应用;vue-cli-service build --mode staging 会在 staging 模式下加载可能存在的 .env、.env.staging 和 .env.staging.local 文件然后构建出生产环境应用。

注意

如果不是以 VUE_APP_开头,或者修改env变量后没有重启项目,变量是不会生效的。

在HelloWorld.vue文件中的代码:

console.log('process.env.VUE_APP_API_BASE',process.env.VUE_APP_API_BASE)

将打印:

process.env.VUE_APP_API_BASE http://0.0.0.0:8081

4,使用别名

在vue-project/src/App.vue源码这里:

import HelloWorld from '@/components/HelloWorld';

可以使用@,是因为在vue.config.js中进行了别名设置:

// 添加别名
config.resolve.alias.set('@', resolve('src'))

5,使用全局 less 变量

在Less样式文件中可以使用样式变量,可以将这些样式变量被定义在一个独立的全局文件中。每次在组件中使用时,如果都需要引入一次,就会感到很麻烦。解决这个问题,可以在配置文件通过配置自动引入。

vue add style-resources-loaderyarn 
add vue-cli-plugin-style-resources-loader

变量文件vue-project/src/assets/styles/variable.less:

@theme-color: #3385ff;

vue.config.js中的配置:

pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'less',
        patterns: [
            path.resolve(__dirname, './src/assets/styles/variable.less'),
        ]
      }
    }

工具要升级到 vue-cli3.x 以上。还有,这里配置的变量文件路径不能使用别名,一定要用相对路径。

HelloWrold.vue中的测试代码:

<!-- 使用带有全局变量的样式 -->
<button class="button">button</button>
...
<style lang="less" scoped>
button{
  color: @theme-color;
}
</style>

效果:

源码

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v2019123014

参考链接

https://www.jianshu.com/p/b1022d224817

Gulp和Webpack对比

https://www.cnblogs.com/huoan/p/10354341.html

vue-cli3 vue.config.js配置

https://blog.csdn.net/u014440483/article/details/87267160

vue-cli3搭建项目之webpack配置

https://cli.vuejs.org/zh/guide/css.html#自动化导入

[专栏]基于 vue+go 如何快速进行业务迭代?

如何选择一个 vue ui 框架?

梳理 50 年人机交互界面发展史,得出这个规律,开发框架的选择不再迷茫

vue 开发常用工具及配置一

vue 开发常用工具及配置二

---------- 正文到此结束了 ----------

本文分享自微信公众号 - 用故事讲技术(ygsjjs),作者:石桥码农

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 全家桶、原理及优化简议

    使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM(Mod...

    李艺
  • 24 事件绑定、事件修饰符与事件三阶段

    在事件方法中,默认第一个参数是特殊变量$event,不管在模板中有没有通过greet($event)显式传递。

    李艺
  • 23 列表渲染与“就地复用”原则

    除了使用for in,还可以使用for of。以of代替in,在数组遍历与对象遍历中是通用的。

    李艺
  • 图灵奖得主展望新黄金时代,拿什么拯救摩尔定律?

    新智元
  • Spring Cloud 简介

    Spring Cloud 是一系列有序框架的集合,其主要的设施有,服务发现与注册,配置中心,消息总线,负载均衡,断路器,数据监控等,通过Spring Boot的...

    mySoul
  • 二维码扫码支付原理

    平常我们在购物付款时,使用手机中的微信或支付宝扫一扫即可完成支付,无需像以前携带现金等着商户找零钱。线下扫码支付大大的提高了我们付款的效率,今天就主要谈一谈扫码...

    yaphetsfang
  • 一图理解 Hbase Bloom Filter 的使用

    hbase 在查询的时候通过Filter就可以高效的判断数据是否在block之中,提高查询效率

    wending-Y
  • HTTP Strict Transport Security (HSTS) in ASP.NET Core

    本文是《2020年了,再不会HTTPS就老了》的后篇,本文着重聊一聊HTTP Strict Transport Security协议的概念和应用。

    小码甲
  • How to Share Git Tag

    Now I have two tags under my git repository. Let’s take a look at how to push th...

    技术小黑屋
  • 电脑网正常,除了IE之外其他浏览器都能正常上网,IE不能上网解决办法

    最近莫名其妙发现IE不能上网,其他浏览器正常,其他应用也都正常 最终发现问题出在IE代理上 解决办法如下图: 1,设置 2,连接 3,局域网设置 4,只勾选自动...

    opengps

扫码关注云+社区

领取腾讯云代金券