带你玩转vue——简单高效的vue.config.js配置

简介: 带你玩转vue——简单高效的vue.config.js配置

通用的vue.config.js配置

module.exports = {
  publicPath: './',
  devServer: {
    port: 7004,
    disableHostCheck: true
  },
  assetsDir:'static',
  indexPath:"index.html",
  //
  lintOnSave: false,
  runtimeCompiler: true,
  productionSourceMap: false,
  css:{
    extract:true,
    sourceMap: false
    },
    //npm install --save-dev compression-webpack-plugin
    configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@i': path.resolve(__dirname, './src/assets'),
      }
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 下面是下载的插件的配置
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100
      })
    ]
  }
  }

publicPath: ‘./’:改配置生效后,打包后的包可放在服务器下任何文件夹内!

devServer.port: 7004:开发环境下的运行端口,此端口非确定,如被占用会自动加1,在生产环境下无效

assetsDir:是否将静态资源整合,并声明整合所在的文件夹

indexPath:index.html的输出路径,默认为index.html

lintOnSave:保存的时候使用 eslint-loader 进行检查。 有效的值:ture | false | "error" 当设置为 "error" 时,检查出的错误会触发编译失败。

css.extract:是否将页面中的css摘取出来生成一个css文件

configureWebpack:

npm install --save-dev compression-webpack-plugin 使用该命令安装compression-webpack-plugin插件 并进行如上配置,webpack打包时会将js文件压缩为.gz文件,减少首屏加载时间,注意同时需要修改nginx配置文件nginx.conf:

#gzip on;

gzip on;

gzip_min_length 1k;

gzip_comp_level 9;

gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

gzip_vary on;

gzip_disable “MSIE [1-6].”;


相关文章
|
4天前
|
JSON JavaScript 前端开发
JavaScript 详解——Vue基础
【8月更文挑战第16天】
14 3
JavaScript 详解——Vue基础
|
4天前
|
JavaScript
在Vue中使用Avue、配置过程以及实际应用
这篇文章介绍了作者在Vue项目中集成Avue组件库的完整过程,包括安装、配置和实际应用,展示了如何利用Avue实现动态表单和数据展示的功能。
在Vue中使用Avue、配置过程以及实际应用
|
5天前
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
22 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
5天前
|
JavaScript 开发工具 git
Vue学习之--------脚手架的分析、Ref属性、Props配置(2022/7/28)
这篇文章分析了Vue脚手架的结构,并详细讲解了`ref`属性和`Props`配置的基础知识、代码实现和测试效果,展示了如何在Vue组件中使用`ref`获取DOM元素或组件实例,以及如何通过`Props`传递和接收外部数据。
Vue学习之--------脚手架的分析、Ref属性、Props配置(2022/7/28)
|
5天前
|
JavaScript 前端开发
解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
这篇文章讨论了在JavaScript和Vue中如何避免定时器重复开启的问题,并提供了一个模拟场景和代码示例,演示了在开启新定时器前清除旧定时器的方法。
解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
|
10天前
|
存储 JavaScript 安全
Vue 3 环境变量配置
Vue 3 环境变量配置
|
11天前
|
JavaScript
Vue进阶篇(二)-彻底改变 Vue.js 状态管理:深入探讨Vue 3 Setup中的DefineModel
Vue进阶篇(二)-彻底改变 Vue.js 状态管理:深入探讨Vue 3 Setup中的DefineModel
|
5天前
如何在 Vue3 项目配置全局方法
本文介绍了在Vue3项目中配置全局方法的几种方式,包括如何将Moment.js日期处理类库和字符串颜色值生成方法设置为全局可访问的属性。
11 0
|
5天前
|
JavaScript 前端开发 API
vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
这篇文章介绍了如何在Vue框架中将表单输入验证逻辑封装到一个JavaScript文件中,并通过正则表达式验证邮箱、身份证、手机号等信息,同时确保两次密码输入的一致性。
|
5天前
|
JavaScript Windows
记一下 Windows11 安装与配置 node.js 的标准步骤
这篇文章记录了在Windows 11系统上安装和配置Node.js的步骤,包括安装Node.js、验证安装、配置npm、设置npm镜像加速、全局安装cnpm并配置镜像、解决TLS连接不安全警告的详细过程。
13 0