Vue-cli3項目 配置webpack (Vue.config.js)

1.webpack配置路徑別名

2.webpack全局注入通用樣式

3.webpack引入第三方插件,如Amap,QRcode等

在項目的根目錄下新建 vue.config.js 文件(是根目錄,不是src目錄),如圖:在這裏插入圖片描述

配置實例如下:

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const fs = require('fs')

module.exports = {
  baseUrl: './',
  runtimeCompiler: true,
  // 配置路徑別名
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_c', resolve('src/components/'))
      .set('_as', resolve('src/assets/img/'))
  },
  // 傳遞第三方插件選項
  pluginOptions: {
    'AMap': 'AMap',
    'QRCode': 'QRCode'
  },
  // 全局注入通用樣式
  css: {
    loaderOptions: {
      stylus: {
        data: fs.readFileSync('./src/assets/stylus/mixins.styl', 'utf-8')
      }
    }
  }
}

具體見官方文檔 https://cli.vuejs.org/zh/config/#vue-config-js

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章