快捷導(dǎo)航

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

更新時(shí)間：2022年06月30日 08:37:09 作者：旭霖

本文主要介紹了vue2之vue.config.js最全配置教程,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

配置目錄:

const path = require('path');
?
function resolve(dir) {
? return path.join(__dirname, dir)
}
?
?
module.exports = {
?
? productionSourceMap: false,// 生產(chǎn)環(huán)境是否要生成 sourceMap
?
? publicPath: './', ?// ? 部署應(yīng)用包時(shí)的基本 URL
?
? outputDir: 'dist', ?// ? 打包時(shí)輸出的文件目錄
?
? assetsDir: 'assets', ?// ? 放置靜態(tài)文件夾目錄
?
? devServer:{},// dev環(huán)境下，webpack-dev-server 相關(guān)配置
?
? lintOnSave: false,//是否在開(kāi)發(fā)環(huán)境下每次保存代碼時(shí)都啟用 eslint驗(yàn)證
?
? css:{},// css的處理
?
? chainWebpack：config=>{} //vue-cli內(nèi)部的webpack配置
?
? pluginOptions:{},// 可以用來(lái)傳遞任何第三方插件選項(xiàng)
?
}

一、 productionSourceMap

① productionSourceMap ：false;

作用 : 把productionSourceMap 置為false，既可以減少包大小，也可以加密源碼。這樣打包后文件小而且別人看不到你的源碼了。

②productionSourceMap ：true;

作用 : 項(xiàng)目打包后，代碼都是經(jīng)過(guò)壓縮加密的，如果運(yùn)行時(shí)報(bào)錯(cuò)，輸出的錯(cuò)誤信息無(wú)法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。有了map就可以像未加密的代碼一樣，準(zhǔn)確的輸出是哪一行哪一列有錯(cuò)。

二、 publicPath

項(xiàng)目打包時(shí)，打包出來(lái)的文件根目錄，如果我們?cè)O(shè)置成“/”則我們打包后默認(rèn)都是在dist目錄下,假設(shè)我們?cè)O(shè)置成"/app"，我們所打包的dist目錄下會(huì)生成一個(gè)app目錄，打包后的資源文件都是在app目錄下的，這是所有的靜態(tài)資源都會(huì)找不到，所以我們一般都是設(shè)置成“/”的。

三、outputDir

項(xiàng)目打包時(shí)輸出的文件目錄，比如說(shuō)設(shè)置成“dist”，那么我們打包后的目錄名稱(chēng)就是“dist”，我們?cè)O(shè)置成“build”，打包后的目錄名稱(chēng)就是“build”。

四、assetDir

我們放置靜態(tài)資源的目錄，項(xiàng)目剛創(chuàng)建時(shí)，默認(rèn)都是asset，所以一般我們不會(huì)動(dòng)，直接配置 assetDir:"assets"，當(dāng)然，如果你不太習(xí)慣，也可以換成你想要的名字，只需要把目錄名和這個(gè)名字時(shí)對(duì)應(yīng)的,比如說(shuō)你習(xí)慣用static，目錄名稱(chēng)是static，那么這里就可以寫(xiě)成 assetsDir:"static"。

五、devServer

在dev環(huán)境下，webpck-dev-server的相關(guān)配置

devServer：{
?
port : 8080, //開(kāi)發(fā)環(huán)境運(yùn)行時(shí)的端口
?
https:false,//是否啟用HTTPS協(xié)議
?
open:true, //項(xiàng)目運(yùn)行成功后是否直接打開(kāi)瀏覽器
?
hot:true,//是否開(kāi)啟熱加載
?
overlay：true,//當(dāng)出現(xiàn)編譯錯(cuò)誤或警告時(shí)，在瀏覽器中顯示全屏覆蓋。
?
proxy: { ? //服務(wù)器代理
?
? ? ?'/api': {
? ? ? ? target: "api-url", ? // 實(shí)際跨域請(qǐng)求的API地址
? ? ? ? secure: false, ? // https請(qǐng)求則使用true
? ? ? ? ws: true,
? ? ? ? changeOrigin: true, ?// 跨域
? ? ? ? // 請(qǐng)求地址重寫(xiě) ?http://front-end/api/login ? http://api-url/login
? ? ? ? pathRewrite: {
? ? ? ? ? '^/api': '/',
? ? ? ? }
?
? ? },
?
?
}

六、lintOnSave

前端程序員都會(huì)有一個(gè)通病，每次寫(xiě)完一點(diǎn)代碼，哪怕寫(xiě)了一個(gè)單詞，定義一個(gè)變量，都會(huì)習(xí)慣性的格式化一下代碼，保存下代碼，這個(gè)配置就是每次我們保存代碼時(shí)，是否要經(jīng)過(guò)esLint檢查代碼的，因?yàn)槲覀€(gè)人不太習(xí)慣使用esLint,所以沒(méi)有做過(guò)多了解，如果項(xiàng)目中有使用eslint的話，不想被檢查到，就可以用，如果沒(méi)有，可以不用寫(xiě)這個(gè)配置。

七、css的處理

css:{
 
loaderOptions：{
 
  less:{},
 
  scss:{},
 
  css:{}
 
 } 
 
}

①loaderOptions的作用：向 webpack 的預(yù)處理器 loader 傳遞選項(xiàng)。共享全局變量

②less的配置

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

③scss的配置

scss: {
   prependData: `@import "@/assets/styles/theme.scss";`//全局注入scss文件，可以在文件內(nèi)編寫(xiě)scss代碼
  }

④

css: {
   prependData: `@import "@/assets/styles/reset.css";`//全局注入scss文件，可以在文件內(nèi)編寫(xiě)css代碼
  }

八、chainWebpack

CLI內(nèi)部webpack配置，會(huì)被 webpack-merge 合并入最終的 webpack 配置,有兩種寫(xiě)法。函數(shù)和對(duì)象的形式，這里只介紹我常用的函數(shù)形式。

chainWebpack：config=>{
 
  const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
 
  config.resolve.alias.set('@', resolve('src'))//配置src別名為@
}

還有很多基礎(chǔ)配置，這些也是我比較常用的配置，大家可以做個(gè)參考

到此這篇關(guān)于vue2之vue.config.js最全配置教程的文章就介紹到這了,更多相關(guān)vue.config.js配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: