vue 开发常用工具及配置三

Posted 艺述思维

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 serveproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2etest 模式用于 vue-cli-service test:unit

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

.env文件:

VUE_APP_TITLE=My App

和 .env.staging 文件:

NODE_ENV=productionVUE_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 开发常用工具及配置三的主要内容,如果未能解决你的问题,请参考以下文章

abp框架运行——前后端分离(基于VUE)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

全网都在找的Java开发工具及下载地址

新品发布 | Prometheus 450第三代正式发布