😳 升级vue-cli3.0/vue.config.js配置

5,982 阅读3分钟

从vue-cli2.x👉升级至vue-cli3.0

vuecli3.0 官方文档


🍒 vuecli 2.x 升级3.0

npm uninstall -g vue-cli       //先卸载原来的版本
npm install -g @vue/cli        //下载vue-cli3.0版本

🍒 3.0自定义功能配置

  • TypeScript
  • Progressive Web App (PWA) Support
  • Router
  • Vuex
  • CSS Pre-processors
  • Linter / Formatter
  • Unit Testing
  • E2E Testing

🍒 创建项目

vue create vuecli3-test

🍒 选择Manually select features

选择Manually select features


🍒 选择自定义功能配置

Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试

选择自定义功能配置


🍒 选择CSS预处理器语言,LESS/SCSS看需求

LESS/SCSS


🍒 选择ESLint的代码规范

ESLint


🍒 进行代码检测,选择在保存时进行检测

ESLint


🍒 选择单元测试解决方案,此处选择 Jest

Jest


🍒 选择 Babel、PostCSS、ESLint等配置文件存放位置

推荐单独保存在各自的配置文件

save

🍒 最后两步

? save this as a preset for future projects? Yes

//是否将以上这些将此保存为未来项目的预配置吗?

? save preset as:vue-test
//描述项目

🍒 配置完成后等待vue-cli完成初始化

waiting

// 进入到vue-test项目
cd vue-test
// - 启动服务
npm run serve
// - 打包编译
npm run build

waiting

🍒 创建完成后的目录

  • 移除了配置文件目录, config 和 build 文件夹。
  • 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中。
  • 在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件。

waiting


🍒 vue.config.js

在根目录下新建一个 vue.config.js文件,进行你的配置,具体配置看文档


const path = require('path');
const IS_PROD = ['production'].includes(process.env.NODE_ENV) 
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // 去掉注释

// gzip --start
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzip = true // 是否使用gzip
const productionGzipExtensions = ['js', 'css'] // 需要gzip压缩的文件后缀
// gzip --end

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  // 部署应用时的基本 URL
  // baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080',
  // baseUrl:'/',

  publicPath: IS_PROD ? './' : '/',

  // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
  outputDir: 'dist',

  // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: '',

  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  indexPath: 'index.html',

  // 默认在生成的静态资源文件名中包含hash以控制缓存
  filenameHashing: true,

  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader)
  // lintOnSave: process.env.NODE_ENV !== 'production',
  lintOnSave: false,

  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,

  // Babel 显式转译列表
  transpileDependencies: [],

  // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
  productionSourceMap: false,

  // 设置生成的 HTML 中 <link rel="stylesheet"><script> 标签的 crossorigin 属性(注:仅影响构建时注入的标签)
  crossorigin: '',

  // 在生成的 HTML 中的 <link rel="stylesheet"><script> 标签上启用 Subresource Integrity (SRI)
  integrity: false,

  // 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中
  // 如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins = config.plugins.concat(
        [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                warnings: false,
                drop_debugger: true,
                drop_console: true, //去掉console注释
              },
            },
          })

        ]
      )
      // gzip
      // 2. 构建时开启gzip,降低服务器压缩对CPU资源的占用,服务器也要相应开启gzip
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }))
    }
  },
  // 对内部的 webpack 配置(比如修改、增加Loader选项)(链式操作)
  chainWebpack: () => {

  },


  // css的处理
  css: {
    // 当为true时,css文件名可省略 module 默认为 false
    modules: false,
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时,你也可以将其设置为 false 免得用户自己导入 CSS
    // 默认生产环境下是 true,开发环境下是 false
    extract: false,
    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
    sourceMap: false,
    //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
    loaderOptions: {
      css: {},
      less: {}
    }
  },

  // 所有 webpack-dev-server 的选项都支持
  devServer: {},

  // 是否为 Babel 或 TypeScript 使用 thread-loader
  parallel: require('os').cpus().length > 1,

  // 向 PWA 插件传递选项
  pwa: {},

  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false, // 热更新
    proxy: null, // 设置代理
  },

  // 可以用来传递任何第三方插件选项
  pluginOptions: {}
}




🍒 vue-cli3.0中的移动端适配

  • 项目中安装 lib-flexiblepostcss-px2rem

npm install lib-flexible --save

npm install postcss-px2rem --save

  • 入口文件引入 import 'lib-flexible/flexible.js'

  • 🍒 postcss.config.js文件
module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
        remUnit: 75,
        exclude: /node_modules|folder_name/i
      }
  }
}

重启项目。再看一下px有没有变成rem

1px的边框容易缺失,使用 /no/ 语法来屏蔽该属性转换


🍒 安装uglifyjs-webpack-plugin打包后去掉注释和console

npm install uglifyjs-webpack-plugin -D

vue.config.js中

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.plugins = config.plugins.concat(
                [
                    new UglifyJsPlugin({
                        uglifyOptions: {
                            compress: {
                                warnings: false,
                                drop_debugger: true,
                                drop_console: true,
                            },
                        },
                    })

                ]
            )
        }
    },


🍒 开启Gzip压缩

npm i -D compression-webpack-plugin

vue.config.js

const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
	configureWebpack:config=>{
        if(process.env.NODE_ENV === 'production'){
            return{
                plugins: [
                    new CompressionPlugin({
                        test:/\.js$|\.html$|.\css/, //匹配文件名
                        threshold: 10240,//对超过10k的数据压缩
                        deleteOriginalAssets: false //不删除源文件
                    })
                ]
            }
        }
    },
}


🍒 运行打包后项目dist

npm install -g serve

# -s 参数的意思是将其架设在 Single-Page Application 模式下

# 这个模式会处理即将提到的路由问题

serve -s dist