vue2之vue.config.js怎么配置

這篇文章主要介紹“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

① 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怎么配置”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。