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 开发常用工具及配置二

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