vue cli3中的各項配置解析 簡潔明了 一看就會 一干就ok

 

 

 

• Babel : 將ES6編譯成ES5
• TypeScript: javascript類型的超集
• Progressive Web App (PWA) Support: 支持漸進式的網頁應用程序
• Router:vue-router
• Vuex: 狀態管理
• CSS Pre-processors: CSS預處理
• Linter / Formatter: 開發規范
• Unit Testing: 單元測試
• E2E Testing: 端到端測試

 

 

 

 

|-- dist                       # 打包后文件夾            
|-- public                     # 靜態文件夾                                   
|   |-- favicon.ico                
|   |-- index.html                    #入口頁面
|-- src                        # 源碼目錄         
|   |--assets                        # 模塊資源
|   |--components                    # vue公共組件
|   |--views                         
|   |--App.vue                                          # 頁面入口文件
|   |--main.js                                            # 入口文件，加載公共組件
|   |--router.js                                        # 路由配置
|   |--store.js                                            # 狀態管理
|-- .env.pre-release          # 預發布環境    
|-- .env.production          # 生產環境       
|-- .env.test              # 測試環境  
|-- vue.config.js             # 配置文件 
|-- .eslintrc.js                  # ES-lint校驗                   
|-- .gitignore                  # git忽略上傳的文件格式   
|-- babel.config.js               # babel語法編譯                        
|-- package.json                # 項目基本信息 
|-- postcss.config.js            # CSS預處理器(此處默認啟用autoprefixer)  

vue.config.js配置

     Vue.config.js是一個可選的配置文件，如果項目的根目錄存在這個文件，那么它就會被 @vue/cli-service 自動加載。你也可以使用package.json中的vue字段，但要注意嚴格遵守JSON的格式來寫。這里使用配置vue.config.js的方式進行處理。

const webpack = require('webpack')
module.exports = {
    //部署應用包時的基本 URL
    publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
    //當運行 vue-cli-service build 時生成的生產環境構建文件的目錄
    outputDir: 'dist',
    //放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
    assetsDir: 'assets',
    // eslint-loader 是否在保存的時候檢查 安裝@vue/cli-plugin-eslint有效
    lintOnSave: true,
    //是否使用包含運行時編譯器的 Vue 構建版本。設置true后你就可以在使用template
    runtimeCompiler: true,
    // 生產環境是否生成 sourceMap 文件 sourceMap的詳解請看末尾  
    productionSourceMap: true,
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 為生產環境修改配置...
        } else {
            // 為開發環境修改配置...
        }
    },
    // css相關配置
    css: {
        // 是否使用css分離插件 ExtractTextPlugin 生產環境下是true,開發環境下是false
        extract: true,
        // 開啟 CSS source maps?
        sourceMap: false,
        // css預設器配置項
        loaderOptions: {},
        // 啟用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // webpack-dev-server 相關配置
    devServer: { // 設置代理
        hot: true, //熱加載
        host: '0.0.0.0', //ip地址
        port: 8085, //端口
        https: false, //false關閉https，true為開啟
        open: true, //自動打開瀏覽器
        proxy: {
            '/api': { //本地 
                target: 'xxx',
                // 如果要代理 websockets
                ws: true,
                changeOrigin: true
            },
            '/test': { //測試
                target: 'xxx'
            },
            '/pre': { //預發布
                target: 'xxx'
            },
            '/pro': { //正式
                target: 'xxx'
            }
        }
    },
    pluginOptions: { // 第三方插件配置
        // ...
    }
}

vue cli3 如何配置babel.config.js 可以按需引用多個不同的組件庫

如題我使用vue cli3.0 創建的vue項目，需要同時按需引用vant，elementUI庫，已經安裝好了依賴

只有vant時   按官方說明配置了babel.config.js

 

 

module.exports = { presets: [ '@vue/app' ], plugins:[ ["import",{ "libraryName": "vant", "libraryDirectory": "es", "style": true } ] ] }


這樣單獨使用一個vant的時候沒有問題，但我因項目需要又要引用elementUI這個ui，官方的配置也是要加入babel的配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins":[
      [
          "component",
          {
              "libraryName":"element-ui",
              "styleLibraryName":"theme-chalk"
          }
      ],
     [
         'import', 
         {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true
        }, 
    'vant',
    ],
    
  ]
}

 這樣就可以了呀