Vue中config的配置詳解

一、vueconfig的配置詳解

在Vue項目中，config文件夾位於項目根目錄下，用於配置項目的各種參數。Vue CLI會自動載入並使用config文件夾中的配置文件。config文件夾中會有兩個文件：dev.env.js和prod.env.js。

dev.env.js：開發環境下的配置文件，包含開發環境下所需要的配置參數。prod.env.js：生產環境下的配置文件，包含生產環境下所需要的配置參數。在這兩個文件中，會有一個基礎的配置文件：index.js。index.js文件會被同時載入到開發環境和生產環境中，也是Vue項目中的核心配置文件。

index.js中的配置包括webpack和dev-server等相關的配置，但需要注意的是，config文件夾中的配置不能直接在Vue組件中使用，如果想要在組件中使用這些配置，可以使用webpack的DefinePlugin插件來實現。

二、vue項目config配置代理

在Vue項目中，config文件夾中的index.js文件中，有一個devServer屬性，可以用來配置dev-server的相關參數，其中最常用的就是proxy屬性。proxy屬性可以將某些URL請求代理到另外一個地址，常用於解決跨域請求的問題。

以下是一個代理API請求的示例：

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:3000',
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    }
}

• target：代理的目標地址
• changeOrigin：將主機標頭的來源更改為目標URL
• pathRewrite：將代理的請求路徑重寫為沒有/api路徑的URL

三、vue項目config配置

在Vue項目中，config文件夾中的index.js文件中，有各種參數可以配置。以下介紹幾種常見的配置方式：

1. 配置別名

通過配置別名可以在代碼中更加方便地使用一些文件或者目錄，例如src文件夾下面的components, assets, views等目錄。

resolve: {
  alias: {
    '@': resolve('src'),
    'assets': resolve('src/assets'),
    'components': resolve('src/components'),
    'views': resolve('src/views')
  }
},

2. 配置埠號

可以通過配置埠號來改變dev-server的默認埠號，以下示例將埠號配置為8080。

port: 8080

3. 配置打包生成文件路徑

配置打包生成文件的路徑，可以通過outputDir屬性來配置，以下示例指定打包生成文件的路徑為dist目錄。

outputDir: 'dist'

4. 配置CDN加速

可以通過配置externals屬性，將一些較大的依賴庫引入CDN來加速網頁的載入速度。

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'axios': 'axios',
  'element-ui': 'ELEMENT'
},

5. 配置圖片壓縮

可以通過配置image-webpack-loader、url-loader來壓縮圖片。

chainWebpack: (config) => {
  config.module
    .rule('images')
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({
      bypassOnDebug: true
    })
    .end()
}

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        // 修改它的選項...
        options.limit = 10000
        return options
      })
  }
}

四、vue的config配置沒有反應

在開發中，有時修改了Vue項目中config文件夾中的配置參數，發現更改沒有生效，這可能是由於Vue項目已經被緩存的原因。可以通過以下步驟來清除Vue項目的緩存：

• 1. 關閉開發伺服器
• 2. 刪除項目根目錄下的node_modules文件夾和package-lock.json文件
• 3. 在終端中輸入npm cache clean –force命令，清除npm的緩存
• 4. 在終端中輸入npm install命令，重新安裝依賴庫
• 5. 啟動開發伺服器

通過以上步驟，可以保證Vue項目的config文件夾中的配置參數生效。