vue2之vue.config.js最全配置教程

目录
  • 配置目录:
  • 一 、 productionSourceMap
  • 二、 publicPath
  • 三、outputDir
  • 四、assetDir
  • 五、devServer
  • 六、lintOnSave
  • 七、css的处理
  • 八、chainWebpack

vue.config.js 相当于之前的webpack 打包工具

配置目录:

const path = require('path');
 
function resolve(dir) {
  return path.join(__dirname, dir)
}
 
 
module.exports = {
 
  productionSourceMap: false,// 生产环境是否要生成 sourceMap
 
  publicPath: './',  //   部署应用包时的基本 URL
 
  outputDir: 'dist',  //   打包时输出的文件目录
 
  assetsDir: 'assets',  //   放置静态文件夹目录
 
  devServer:{},// dev环境下,webpack-dev-server 相关配置
 
  lintOnSave: false,//是否在开发环境下每次保存代码时都启用 eslint验证
 
  css:{},// css的处理
 
  chainWebpack:config=>{} //vue-cli内部的webpack配置
 
  pluginOptions:{},// 可以用来传递任何第三方插件选项
 
}

一 、 productionSourceMap

① productionSourceMap :false;

作用 : 把productionSourceMap 置为false,既可以减少包大小,也可以加密源码。这样打包后文件小而且别人看不到你的源码了。

②productionSourceMap :true;

作用 : 项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。

二、 publicPath

项目打包时,打包出来的文件根目录,如果我们设置成“/”则我们打包后默认都是在dist目录下,假设我们设置成"/app",我们所打包的dist目录下会生成一个app目录,打包后的资源文件都是在app目录下的,这是所有的静态资源都会找不到,所以我们一般都是设置成“/”的。

三、outputDir

项目打包时输出的文件目录,比如说设置成“dist”,那么我们打包后的目录名称就是“dist”,我们设置成“build”,打包后的目录名称就是“build”。

四、assetDir

我们放置静态资源的目录,项目刚创建时,默认都是asset,所以一般我们不会动,直接配置 assetDir:"assets",当然,如果你不太习惯,也可以换成你想要的名字,只需要把目录名和这个名字时对应的,比如说你习惯用static,目录名称是static,那么这里就可以写成 assetsDir:"static"。

五、devServer

在dev环境下,webpck-dev-server的相关配置

devServer:{
 
port : 8080, //开发环境运行时的端口
 
https:false,//是否启用HTTPS协议
 
open:true, //项目运行成功后是否直接打开浏览器
 
hot:true,//是否开启热加载
 
overlay:true,//当出现编译错误或警告时,在浏览器中显示全屏覆盖。
 
proxy: {   //服务器代理
 
     '/api': {
        target: "api-url",   // 实际跨域请求的API地址
        secure: false,   // https请求则使用true
        ws: true,
        changeOrigin: true,  // 跨域
        // 请求地址重写  http://front-end/api/login ⇒ http://api-url/login
        pathRewrite: {
          '^/api': '/',
        }
 
    },
 
 
}

六、lintOnSave

前端程序员都会有一个通病,每次写完一点代码,哪怕写了一个单词,定义一个变量,都会习惯性的格式化一下代码,保存下代码,这个配置就是每次我们保存代码时,是否要经过esLint检查代码的,因为我个人不太习惯使用esLint,所以没有做过多了解,如果项目中有使用eslint的话,不想被检查到,就可以用,如果没有,可以不用写这个配置。

七、css的处理

css:{

loaderOptions:{

  less:{},

  scss:{},

  css:{}

 } 

}

①loaderOptions的作用:向 webpack 的预处理器 loader 传递选项。共享全局变量

②less的配置

less: {
       data:"@import "@/assets/styles/mixin.less" // 把less文件注入全局,在全局可以直接使用
    }

③scss的配置

scss: {
   prependData: `@import "@/assets/styles/theme.scss";`//全局注入scss文件,可以在文件内编写scss代码
  }

css: {
   prependData: `@import "@/assets/styles/reset.css";`//全局注入scss文件,可以在文件内编写css代码
  }

八、chainWebpack

CLI内部webpack配置,会被 webpack-merge 合并入最终的 webpack 配置,有两种写法。函数和对象的形式,这里只介绍我常用的函数形式。

chainWebpack:config=>{

  const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];

  config.resolve.alias.set('@', resolve('src'))//配置src别名为@
}

还有很多基础配置,这些也是我比较常用的配置,大家可以做个参考

到此这篇关于vue2之vue.config.js最全配置教程的文章就介绍到这了,更多相关vue.config.js配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vueCli4如何配置vue.config.js文件

    目录 vueCli4配置vue.config.js vueCli4配置文件路径别名及使用 项目根目录下创建vue.config.js文件 配置文件中写入一下代码 别名的使用 vueCli4配置vue.config.js const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') //cnpm install --save-dev compression-webpack-p

  • vue.config.js中配置Vue的路径别名的方法

    在官方的vue-cli配置参考中存在一个configureWebpack webpack中有一个配置路径别名的属性 const path = require('path') module.exports = { // 对象和函数都可以,如果要控制开发环境可以选择函数 configureWebpack:{ resolve:{ alias:{ 'assets':path.resolve('./src/assets') } } } 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我

  • Vue-cli3项目配置Vue.config.js实战记录

    Vue-cli3 搭建的项目 界面想对之前较为简洁 之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件(是根目录,不是src目录 语法 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build

  • vue2.x 从vue.config.js配置到项目优化

    vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载.你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写. 前言 在实际项目中优化也是经常需要做的事情,特别在中大型项目中降低打包体积大小,提高首屏加载时间是必不可少的,同时在面试中也是一个高频问题.本片文章我将从vue.config.js配置到项目优化前后效果

  • @vue/cli4.x版本的vue.config.js常用配置方式

    目录 @vue/cli4.x的vue.config.js常用配置 vue-cli4.*配置vue.config.js文件配置内容不生效 解决 @vue/cli4.x的vue.config.js常用配置 设置访问端口号.访问IP地址.跨域代理,路径别名 const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') // compression-webpack-plugin插件

  • vue - vue.config.js中devServer配置方式

    前言 这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为'',即空字符串 只有一个接口ip端口时 devServer: { open: false, // 跨域 proxy: { '/nuojinadm/': { target: 'http://192.168.0.11/', changeOrigin: true } } } 2.设置axios中的baseUrl 与proxy端口一致 baseUrl: { dev: '/nuojinadm/

  • vue.config.js打包优化配置

    百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身经历了,有需要的可以参考下,先上效果图,以免你们以为我吹牛逼,嘻嘻 优化方向 1.图片资源压缩 2.将 productionSourceMap 设为 false,map不进行生成 3.cdn配置(可选) 4.代码压缩 5.公共代码抽离(个人感觉没啥用) 未优化之前的 //感觉太大了 抬它 优化之后的 废话不多说了,上代码是重点 这些是必要的下载 /*cnpm install image-webpack-loader --save-dev c

  • vue.config.js常用配置详解

    使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置 module.exports = { // 选项... } 基本路径 baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代. 在开发环境下,如果想把开发服务器架设在根路径,可以使用一个条件式的值 module.exports =

  • vue2之vue.config.js最全配置教程

    目录 配置目录: 一 . productionSourceMap 二. publicPath 三.outputDir 四.assetDir 五.devServer 六.lintOnSave 七.css的处理 八.chainWebpack vue.config.js 相当于之前的webpack 打包工具 配置目录: const path = require('path');   function resolve(dir) {   return path.join(__dirname, dir) }

  • vue.config.js完整配置教程

    目录 引言 1 介绍 查看默认的webpack配置 vue.config.js文件 2 基本配置 3 插件及规则的配置 4 规则rules的配置 4.1 rules的新增 4.2 rules的修改 5 插件plugins 的配置 5.1 plugins的新增 5.2 plugins的修改 5.3 plugins的删除 6 一些常见的配置 6.1 修改enter文件 6.2 DefinePlugin 6.3 自定义filename 及 chunkFilename 6.4 修改html-webpac

  • vue-cli3中vue.config.js配置教程详解

    前言 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的

  • 详解如何配置vue-cli3.0的vue.config.js

    本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue

  • vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

    使用自己基于vue-cli 2.X改造的前端多页脚手架有近1年多时间了,一直没机会升级3.0版本 开始零零碎碎开始写一些功能,顺便分享一下 const path = require('path') const glob = require('glob') /** 获取多页的入口脚本和模板 */ const getPages = (() => { const [ globPathHtml, globPathJs, pages, tempSet ] = [ ['./src/modules/**/in

随机推荐