这篇文章主要介绍“vue2之vue.config.js怎么配置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue2之vue.config.js怎么配置”文章能帮助大家解决问题。
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 :false;
作用 : 把productionSourceMap 置为false,既可以减少包大小,也可以加密源码。这样打包后文件小而且别人看不到你的源码了。
②productionSourceMap :true;
作用 : 项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
项目打包时,打包出来的文件根目录,如果我们设置成“/”则我们打包后默认都是在dist目录下,假设我们设置成"/app",我们所打包的dist目录下会生成一个app目录,打包后的资源文件都是在app目录下的,这是所有的静态资源都会找不到,所以我们一般都是设置成“/”的。
项目打包时输出的文件目录,比如说设置成“dist”,那么我们打包后的目录名称就是“dist”,我们设置成“build”,打包后的目录名称就是“build”。
我们放置静态资源的目录,项目刚创建时,默认都是asset,所以一般我们不会动,直接配置 assetDir:"assets",当然,如果你不太习惯,也可以换成你想要的名字,只需要把目录名和这个名字时对应的,比如说你习惯用static,目录名称是static,那么这里就可以写成 assetsDir:"static"。
在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': '/', } }, }
前端程序员都会有一个通病,每次写完一点代码,哪怕写了一个单词,定义一个变量,都会习惯性的格式化一下代码,保存下代码,这个配置就是每次我们保存代码时,是否要经过esLint检查代码的,因为我个人不太习惯使用esLint,所以没有做过多了解,如果项目中有使用eslint的话,不想被检查到,就可以用,如果没有,可以不用写这个配置。
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代码 }
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怎么配置”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。