前端 Vue-cli中 vue.config.js 的配置詳解

Vue-cli 3 / Vue-cli 4

 

目錄結構

├── README.md  					# 說明
|-- dist                       	# 打包後文件夾
├── babel.config.js 			# babel語法編譯
├── package-lock.json 
├── public						# 靜態文件夾,這類資源將會直接被拷貝，而不會經過 webpack 的處理。
│   ├── favicon.ico
│   └── index.html				#入口頁面
└── src						    # 源碼目錄
    ├── App.vue - 頁面
    ├── assets  - 靜態目錄,這類引用會被 webpack 處理。
    │   └── logo.png
    ├── components 組件
    │   └── HelloWorld.vue
    └── main.js                  # 入口文件，加載公共組件
│—— vue.config.js                # 配置文件，需自行配置 
│—— .gitignore          		 # git忽略上傳的文件格式   
│—— babel.config.js   			 # babel語法編譯                        
│—— package.json       	         # 項目基本信息 
│—— .env       	                 # 環境變量和模式，需自行配置 
│—— .eslintrc.js    		  	 # ES-lint校驗                   

 

 

vue.config.js 配置

module.exports = {
  publicPath: './',  // 基本路徑
  outputDir: 'dist', // 構建時的輸出目錄
  assetsDir: 'static', // 放置靜態資源的目錄
  indexPath: 'index.html', // html 的輸出路徑
  filenameHashing: true, // 文件名哈希值
  lintOnSave: false, // 是否在保存的時候使用 `eslint-loader` 進行檢查。

  // 組件是如何被渲染到頁面中的？ （ast：抽象語法樹；vDom：虛擬DOM）
  // template ---> ast ---> render ---> vDom ---> 真實的Dom ---> 頁面
  // runtime-only：將template在打包的時候，就已經編譯爲render函數
  // runtime-compiler：在運行的時候纔去編譯template
  runtimeCompiler: false,

  transpileDependencies: [], // babel-loader 默認會跳過 node_modules 依賴。
  productionSourceMap: false, // 是否爲生產環境構建生成 source map

  //調整內部的 webpack 配置
  configureWebpack: () => { },

  chainWebpack: () => { },

  // 配置 webpack-dev-server 行爲。
  devServer: {
    open: true, // 編譯後默認打開瀏覽器
    host: '0.0.0.0',  // 域名
    port: 8080,  // 端口
    https: false,  // 是否https
    // 顯示警告和錯誤
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:10001',
        changeOrigin: true, // 是否跨域
        ws: false, // 是否支持 websocket
        secure: false, // 如果是 https 接口，需要配置這個參數
        pathRewrite: { // 可以理解爲一個重定向或者重新賦值的功能
          '^/api': ''    // '^/api': '/'    這種接口配置出來     http://127.0.0.1:10001/login
        }               // '^/api': '/api'  這種接口配置出來     http://127.0.0.1:10001/api/login
      }
    }
  }
}