揭秘vue-cli3全面配置

发布时间：2020-03-11 16:43:29
作者：码农之家
点击：174

这篇文章主要知识点是关于vue-cli3、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书

Vue企业开发实战扫描版

类型：Vue.js实战大小：109.6 MB格式：PDF作者：肖睿

立即下载

vue-cli3全面配置详解

本文介绍了vue-cli3全面配置详解，分享给大家，具体如下：

vue-cli3-config

创建项目

配置环境变量

通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境

在项目根目录中新建.env, .env.production, .env.analyz等文件

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，代码中可以通过process.env.VUE_APP_BASE_API访问

NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用

.env serve默认的环境变量

NODE_ENV = 'development'
VUE_APP_BASE_API = 'https://demo.cn/api'
VUE_APP_SRC = 'https://wechat-timg.oss-cn-hangzhou.aliyuncs.com/demo'

.env.production build默认的环境变量

NODE_ENV = 'production'

VUE_APP_BASE_API = 'https://demo.com/api'
VUE_APP_SRC = 'https://img-wechat.oss-cn-hangzhou.aliyuncs.com/demo'

.env.analyz 用于webpack-bundle-analyzer打包分析

NODE_ENV = 'production'
IS_ANALYZ = 'analyz'

VUE_APP_BASE_API = 'https://demo.com/api'
VUE_APP_SRC = 'https://img-wechat.oss-cn-hangzhou.aliyuncs.com/demo'

修改package.json

"scripts": {
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "analyz": "vue-cli-service build --mode analyz",
 "lint": "vue-cli-service lint"
}

配置vue.config.js

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);

module.exports = {
 baseUrl: './', // 默认'/'，部署应用包时的基本 URL
 outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
 assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录
 lintOnSave: false,
 runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
 productionSourceMap: false, // 生产环境的 source map
 parallel: require('os').cpus().length > 1,
 pwa: {}
};

配置proxy跨域

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
module.exports = {
  devServer: {
    // overlay: {
    //  warnings: true,
    //  errors: true
    // },
    open: IS_PROD,
    host: '0.0.0.0',
    port: 8000,
    https: false,
    hotOnly: false,
    proxy: {
     '/api': {
      target: process.env.VUE_APP_BASE_API || 'http://127.0.0.1:8080',
      changeOrigin: true
     }
    }
  }
}

修复HMR(热更新)失效

module.exports = {
  chainWebpack: config => {
    // 修复HMR
    config.resolve.symlinks(true);
  }
}

添加别名

const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);

module.exports = {
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
     .set('@', resolve('src'))
     .set('assets', resolve('src/assets'))
     .set('components', resolve('src/components'))
     .set('layout', resolve('src/layout'))
     .set('base', resolve('src/base'))
     .set('static', resolve('src/static'));
  }
}

添加打包分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  chainWebpack: config => {
    // 打包分析
    if (process.env.IS_ANALYZ) {
     config.plugin('webpack-report')
      .use(BundleAnalyzerPlugin, [{
       analyzerMode: 'static',
      }]);
    }
  }
}

配置externals

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖

module.exports = {
  configureWebpack: config => {
    config.externals = {
     'vue': 'Vue',
     'element-ui': 'ELEMENT',
     'vue-router': 'VueRouter',
     'vuex': 'Vuex',
     'axios': 'axios'
    }
  }
}

去掉console.log

方法一：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  configureWebpack: config => {
    if (IS_PROD) {
      const plugins = [];
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          },
          sourceMap: false,
          parallel: true
        })
      );
      config.plugins = [
        ...config.plugins,
        ...plugins
      ];
    }
  }
}

方法二：使用babel-plugin-transform-remove-console插件

npm i --save-dev babel-plugin-transform-remove-console

在babel.config.js中配置

const plugins = [];
if(['production', 'prod'].includes(process.env.NODE_ENV)) { 
 plugins.push("transform-remove-console")
}

module.exports = {
 presets: [["@vue/app",{"useBuiltIns": "entry"}]],
 plugins: plugins
};

开启gzip压缩

npm i --save-dev compression-webpack-plugin

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

module.exports = {
  configureWebpack: config => {
    if (IS_PROD) {
      const plugins = [];
      plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
        })
      );
      config.plugins = [
        ...config.plugins,
        ...plugins
      ];
    }
  }
}

还可以开启比gzip体验更好的Zopfli压缩详见https://webpack.js.org/plugins/compression-webpack-plugin

npm i --save-dev @gfx/zopfli brotli-webpack-plugin

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const zopfli = require("@gfx/zopfli");
const BrotliPlugin = require("brotli-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

module.exports = {
  configureWebpack: config => {
    if (IS_PROD) {
      const plugins = [];
      plugins.push(
        new CompressionWebpackPlugin({
          algorithm(input, compressionOptions, callback) {
           return zopfli.gzip(input, compressionOptions, callback);
          },
          compressionOptions: {
           numiterations: 15
          },
          minRatio: 0.99,
          test: productionGzipExtensions
        })
      );
      plugins.push(
        new BrotliPlugin({
          test: productionGzipExtensions,
          minRatio: 0.99
        })
      );
      config.plugins = [
        ...config.plugins,
        ...plugins
      ];
    }
  }
}

为sass提供全局样式，以及全局变量

可以通过在main.js中Vue.prototype.$src = process.env.VUE_APP_SRC;挂载环境变量中的配置信息，然后在js中使用$src访问。

css中可以使用注入sass变量访问环境变量中的配置信息

module.exports = {
  css: {
    modules: false,
    extract: IS_PROD,
    sourceMap: false,
    loaderOptions: {
     sass: {
      // 向全局sass样式传入共享的全局变量
      data: `@import "~assets/scss/variables.scss";$src: "${process.env.VUE_APP_SRC}";`
     }
    }
  }
}

在scss中引用

.home {
  background: url($src + '/images/500.png');
}

添加IE兼容

npm i --save @babel/polyfill

在main.js中添加

import '@babel/polyfill';

配置babel.config.js

const plugins = [];

module.exports = {
 presets: [["@vue/app",{"useBuiltIns": "entry"}]],
 plugins: plugins
};

完整配置

安装依赖

复制代码代码如下:

	npm i --save-dev compression-webpack-plugin babel-plugin-transform-remove-console @gfx/zopfli brotli-webpack-plugin

package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "analyz": "vue-cli-service build --mode analyz",
  "lint": "vue-cli-service lint"
}

babel.config.js

const plugins = [];
// if(['production', 'prod'].includes(process.env.NODE_ENV)) { 
//  plugins.push("transform-remove-console")
// }

module.exports = {
 presets: [["@vue/app",{"useBuiltIns": "entry"}]],
 plugins: plugins
};
vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// const zopfli = require("@gfx/zopfli");
// const BrotliPlugin = require("brotli-webpack-plugin");

const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

module.exports = {
  baseUrl: './', // 默认'/'，部署应用包时的基本 URL
  outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
  assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false,
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: false, // 生产环境的 source map

  configureWebpack: config => {
    // config.externals = {
    //   'vue': 'Vue',
    //   'element-ui': 'ELEMENT',
    //   'vue-router': 'VueRouter',
    //   'vuex': 'Vuex',
    //   'axios': 'axios'
    // }

    if (IS_PROD) {
      const plugins = [];
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          },
          sourceMap: false,
          parallel: true
        })
      );
      plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
        })
      );
      // Zopfli压缩 https://webpack.js.org/plugins/compression-webpack-plugin/
      // plugins.push(
      //   new CompressionWebpackPlugin({
      //     algorithm(input, compressionOptions, callback) {
      //       return zopfli.gzip(input, compressionOptions, callback);
      //     },
      //     compressionOptions: {
      //       numiterations: 15
      //     },
      //     minRatio: 0.99,
      //     test: productionGzipExtensions
      //   })
      // );
      // plugins.push(
      //   new BrotliPlugin({
      //     test: productionGzipExtensions,
      //     minRatio: 0.99
      //   })
      // );
      config.plugins = [
        ...config.plugins,
        ...plugins
      ];
    }
  },
  chainWebpack: config => {
    // 修复HMR
    config.resolve.symlinks(true);

    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('layout', resolve('src/layout'))
      .set('base', resolve('src/base'))
      .set('static', resolve('src/static'));

    // 打包分析
    if (process.env.IS_ANALYZ) {
      config.plugin('webpack-report')
        .use(BundleAnalyzerPlugin, [{
          analyzerMode: 'static',
        }]);
    }

    // 多页面配置，为js添加hash
    // config.output.chunkFilename(`js/[name].[chunkhash:8].js`)

    // 修改图片输出路径
    // config.module
    //  .rule('images')
    //  .test(/\.(png|jpe?g|gif|ico)(\?.*)?$/)
    //  .use('url-loader')
    //  .loader('url-loader')
    //  .options({
    //    name: path.join('../assets/', 'img/[name].[ext]')
    //  })
  },
  css: {
    modules: false,
    extract: IS_PROD,
    // 为css后缀添加hash
    // extract: {
    // filename: 'css/[name].[hash:8].css',
    // chunkFilename: 'css/[name].[hash:8].css'
    /

以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。

vue 相关电子书

Spring Boot+Vue全栈开发实战 PDF 完整版电子书

分类：Spring　作者：王松大小：196.3 MB

免费下载
JavaScript+Vue+React全程实例 PDF 版电子书

分类：JS实例　作者：郑均辉,薛燚大小：59150 MB M

免费下载
Vue.js实战 PDF 高质量扫描版电子书

分类：Vue　作者：梁灏大小：196.7 MB

免费下载
Vue.js快速入门 PDF 版电子书

分类：Vue.js入门　作者：申思维大小：26581 MB M

免费下载
前端工程师必备技能：Vue移动开发实战技巧 PDF 影印超清版电子书

分类：Vue实战　作者：李利德大小：122 MB

免费下载
Vue.js项目实战 PDF 影印完整版电子书

分类：Vue　作者：纪尧姆·周大小：141 MB

免费下载
水晶石技法VUE 10完全学习手册 PDF 版电子书

分类：VUE10学习手册　作者：何勇大小：114191 MB

免费下载
Vue.js快速入门 PDF 完整版电子书

分类：Web前端　作者：申思维大小：186.6 MB

免费下载
Vue.js前端开发：快速入门与专业应用 PDF 高清版电子书

分类：前端开发　作者：陈陆扬大小：3.6KB MB

免费下载

学习笔记

网友NO.784384

Vue-cli3.X使用px2 rem遇到的问题及解决方法

把项目脚手架升级为cli3.X了以后，模板简洁了很多，运行起来也更加快速。但是也随之而来是某些兼容问题。比如我们要在项目钟使用px2rem来计算设计稿的时候，我们不能像以前老的脚手架那样操作了。那我们应该来如何设置呢？首先，我们应该用NPM来安装 postcss-px2rem npm i postcss-plugin-px2rem --save -dev 然后我们需要在vue.config.js中创建一个配置。由于在 vue-cli3.X 中。去掉了build和config文件夹。所有的配置都放到了vue.config.js，然而这个文件脚手架并没有生成，所以需要手动在项目的根目录创建一个文件在vue.config.js里配置 module.exports = { lintOnSave: true, css: { loaderOptions: { postcss: { plugins: [ require('postcss-plugin-px2rem')({ rootValue:75, // 新版本的是这个值 mediaQuery: false, //（布尔值）允许在媒体查询中转换px。 minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。默认 ……

网友NO.234129

详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决

最近遇到一个问题，用 Vue 开发的项目在最近两年新出的安卓手机上没问题，在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因，目前已知的是Android 6.0 以上都 OK，6.0 以下就不行了。低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性，所以报错。但在手机上调试不方便，受一篇文章的启发， IE 浏览器也是同样的问题，所以可以在 IE 上调试，一个调好了两个就都好了。突然发现万恶的 IE 还是有点用的… 网上的文章大部分是 Vue-cli 2.x 版本的解决方案，但 Vue-cli 3 跟之前的版本还是有很大差异的，可能是我比较菜，看了 n 篇文章还是不知道怎么配置。经过努力，终于梳理出了基于 Vue-cli 3 的项目如何做兼容性配置的步骤： 1. 根目录下新建 .babelrc 文件在项目根目录下新建 .babelrc 文件，跟 package.json 同级。将以下代码复制……

网友NO.448988

vue-cli3环境变量与分环境打包的方法示例

第一步 : 了解环境变量概念我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入.env.local # 在所有的环境中被载入，但会被 git 忽略.env.[mode] # 只在指定的模式中被载入.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略环境变量文件只包含环境变量的“键=值”对： FOO=barVUE_APP_SECRET=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用除了自定义的VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量： NODE_ENV - 会是 "development"、"production" 或 "test"中的一个。具体的值取决于应用运行的模式。 BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。模式概念: 模式是……

发布评论

揭秘vue-cli3全面配置

vue-cli3全面配置详解

vue 相关电子书

学习笔记

最新文章

文章排行

最新电子书