vue3.0?vue.config.js文件常用配置方法是什么

這篇文章主要介紹“vue3.0 vue.config.js文件常用配置方法是什么”，在日常操作中，相信很多人在vue3.0 vue.config.js文件常用配置方法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue3.0 vue.config.js文件常用配置方法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

vue3.0 vue.config.js文件常用配置

在Vue 3.0中，與2.0版本相比有一定的差別，最明顯的就是缺少了build、config文件夾，而在3.0中，關于項目的配置修改及webpack的修改，需要手動創建一個新的文件：vue.config.js。因為3.0版本中vue已經內置了很多關于webpack的配置，一般情況下開箱即用，需要修改則可以在vue.config.js文件中完成。

所以這里記錄一下，3.0版本中常用的配置項：

// vue.config.js
 
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
// const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const webpack = require("webpack");
 
module.exports = {
  // 項目部署的基本路徑,默認假設你的應用將會部署在域名的根部,比如，https://www.vue-cli.com/
  // 如果你的應用是部署在一個子路徑下，那么你需要在這里指定子路徑，比如，
  // 如果你部署在 https://www.my-vue.com/my-app/; 那么將這個值改為 “/my-app/”
  publicPath: "/",
 
  // 將構建好的文件輸出到哪里 當運行 vue-cli-service build 時生成的生產環境構建文件的目錄。
  // 注意目標目錄在構建之前會被清除 (構建時傳入 --no-clean 可關閉該行為)。
  outputDir: "dist",
 
  // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對于 outputDir 的) 目錄。
  assetsDir: "static",
 
  // 指定生成的 index.html 的輸出路徑 (相對于 outputDir)。也可以是一個絕對路徑。
  indexPath: 'index.html',
 
  // 默認在生成的靜態資源文件名中包含hash以控制緩存
  filenameHashing: true,
 
  // 是否在開發環境下通過eslint-loader在每次保存時lint代碼。這個值會在@vue/cli-plugin-eslint 被安裝之后生效。
  // 設置為 true 時, eslint-loader 會將 lint 錯誤輸出為編譯警告。默認情況下， 
  // 警告僅僅會被輸出到命令行，且不會使得編譯失敗。
  // 如果你希望讓 lint 錯誤在開發時直接顯示在瀏覽器中，你可以使用 lintOnSave: 'error'。
  // 這會強制 eslint-loader 將 lint 錯誤輸出為編譯錯誤，同時也意味著 lint 錯誤將會導致編譯失敗。
  lintOnSave: true,
 
  // 是否使用包含運行時編譯器的 Vue 構建版本。設置為 true 后你就可以在 Vue 組件中使用 
  // template 選項了，但是這會讓你的應用額外增加 10kb 左右。
  runtimeCompiler: false,
 
  // 默認情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式
  // 轉譯一個依賴，可以在這個選項中列出來。
  transpileDependencies: [],
 
  // 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。
  productionSourceMap: true,
 
  // 向 CSS 相關的 loader 傳遞選項
  css: {
    // 當為true時，css文件名可省略 module 默認為 false
    modules: false,
    // 是否將組件中的 CSS 提取至一個獨立的 CSS 文件中,當作為一個庫構建時，你也可以將其設置為 false 免得用戶自己導入 CSS
    // 默認生產環境下是 true，開發環境下是 false
    extract: false,
    // 是否為 CSS 開啟 source map。設置為 true 之后可能會影響構建的性能
    sourceMap: false,
    /*為預處理器 loader 傳遞自定義選項*/
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_variable.scss";`,// 預設全局css變量
      },
      css: {
        // 這里的選項會傳遞給 css-loader
      },
      postcss: {
        // 這里的選項會傳遞給 postcss-loader
      }
    },
  },
 
  // 是一個函數，會接收一個基于 webpack-chain 的 ChainableConfig 實例。允許對內部的 
  // webpack 配置進行更細粒度的修改。
  chainWebpack: config => {
    // 添加別名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("utils", resolve("src/utils"))
      .set("api", resolve("src/api"));
  },
 
  // 是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多于
  //一個內核時自動啟用，僅作用于生產構建。
  parallel: require("os").cpus().length > 1,
 
  // 向 PWA 插件傳遞選項。
  // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
 
  // 所有 webpack-dev-server 的選項都支持。
  // 注意：有些值像 host、port 和 https 可能會被命令行參數覆寫。
  // 有些值像 publicPath 和 historyApiFallback 不應該被修改，因為它們需要和開發服務器的 publicPath 同步以保障正常的工作。
  // 本地服務配置
  devServer: {
    host: "0.0.0.0",
    port: 8080, // 端口號
    https: false, // https:{type:Boolean}
    open: true //配置自動啟動瀏覽器  open: 'Google Chrome'-默認啟動谷歌
 
    // 配置跨域代理
    proxy: {
    // 說明：
    // 瀏覽器有同源策略不支持跨域，但服務器沒有，通過proxy配置，將對于接口服務器的請求代理到本地服務器，
    // 再由本地服務器轉發到接口服務器（target目標服務器），所以設置代理后，
    // 接口請求路徑會變成代理服務器地址，即本地地址localhost 或者 127.0.0.1
 
    // 配置：
    // '/api'可以是任何值，表示以/api開頭的請求，實際項目中所以路徑以/api開頭的請求都會被本地服務器轉發
    '/api': {
      // target指想要被代理的后端接口服務器地址(目標路徑)(真正請求的服務器地址)
      target: 'http://192.168.6.267:8080',
      // pathRewrite用以在發送請求時，重寫請求路徑
      // 如果在實際的請求路徑中你不希望出現/api，那么可以重寫路徑，在請求路徑中去掉/api，如下所示
      pathRewrite: {
        // 舉例：
        // 如果你的接口服務地址為：http://192.168.6.267:8080，你的接口路徑為/base/company/list
        // 那么為了可以使用/api代理，你可以在接口路徑前添加/api，如：/api/base/company/list
        // 那么你的請求就會被本地服務代理到真正的接口地址，解決了跨域問題
        // 但是你的請求路徑就會變成：http://192.168.6.267:8080/api/base/company/list，路徑中多余/api
        // 那么你可以通過重寫（如下方式）去掉/api
        // 或者你可以選擇將/api改為/base，就不需要重寫路徑了，具體的使用根據業務來決定
        '^/api': ''
      }
    }
  },
  },
 
  // 第三方插件選項
  // 這是一個不進行任何 schema 驗證的對象，因此它可以用來傳遞任何第三方插件選項。
  pluginOptions: {}
};

vue3實戰-vue.config.js配置問題

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    //基本路徑
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    //輸出目錄
	outputDir: 'dist',
	//指定生成的文件
	indexPath: 'index.html',
	//vue兼容ie
	transpileDependencies: true,
	//是否啟用eslint驗證
	lintOnSave: false,
	//開發環境配置
	devServer: {
	    //允許別人訪問自己的ip地址
		host: '0.0.0.0',
		//代理配置
		proxy: {
            '/api': {
                target: 'https://192.168.x.xxx:8080/',//接口的域名
                ws: true,//是否代理websockets
                secure: false,//是否是https接口
                changeOrigin: true,//是否跨域
                pathRewrite: {//重寫地址，將前綴/api轉為""
                	'^/api': ""
                }
            }
        }
	}
})

到此，關于“vue3.0 vue.config.js文件常用配置方法是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！