快捷導(dǎo)航

vite.config.js或者vue.config.js配置方式

更新時間：2023年10月09日 16:01:56 作者：王——小喵

這篇文章主要介紹了vite.config.js或者vue.config.js配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vite.config.js或者vue.config.js配置

vue3 config+vite 配置

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";
import { createSvg } from "./src/icons/index";
export default defineConfig({
  // 添加svg插件
  plugins: [vue(), createSvg("./src/icons/svg/")],
  // 識別 @ 符號為"./src"目錄開始
  resolve: {
    alias: {
      "@": resolve("./src"),
    },
  },
  server: {
    // 開啟 https，一般不開啟
    https: true,
    //配置代理轉(zhuǎn)發(fā)，解決跨域問題，可以配置多個
    proxy: {
      "/abc": {
        target: "http://123.456.78.180/",
        changeOrigin: true,
        ws: true,
        rewrite: (path) =>
          path.replace(/^\/abc/, "/abc"),
      }
    },
  },
  css: {
    //css預(yù)處理
    preprocessorOptions: {
      additionalData: '@import "@/styles/layout.scss";',
    },
  },
});

vue2+webpack config 配置

const path = require('path')
module.exports = {
  publicPath: './', // 打包出的目標代碼就可以在任意目錄下訪問
  //  publicPath: '/app/', //署應(yīng)用包時的基本 URL。  vue-router history模式使用
  outputDir: 'dist', //  生產(chǎn)環(huán)境構(gòu)建文件的目錄
  assetsDir: 'static', //  outputDir的靜態(tài)資源(js、css、img、fonts)目錄
  lintOnSave: false,
  productionSourceMap: false, // 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。
  devServer: {
    port: 8082, // 端口   
    https: true,// 開啟 https，一般不開啟
    open: false, // 啟動后打開瀏覽器
    disableHostCheck: true,
    overlay: {
      //  當(dāng)出現(xiàn)編譯器錯誤或警告時，在瀏覽器中顯示全屏覆蓋層
      warnings: false,
      errors: true
    },
   proxy: {
     //配置跨域
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true // 允許跨域
        pathRewrite: {
           '/api': '/api'
        }
      }
    }
}

v3 vite.config.js常用基本配置項

 import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
/* path模塊是node.js的內(nèi)置模塊     不支持ts若使用->npm install @types/node -D */
import { resolve } from 'path';
/*還需amfe-flexible   在main中直接引入即可*/
import postCssPxToRem from "postcss-pxtorem";  //npm i postcss-pxtorem -D
export default defineConfig({
  base: "./", 
  plugins: [vue()],
  resolve: {
    alias: {
    /*定義全局路徑*/
      '@': resolve(__dirname, './src'),
      '^': resolve(__dirname, './src/views'),
      '#': resolve(__dirname, './src/components')
    }
  },
  css: {
    postcss: {
      plugins: [
      /*適配rem  也可在根目錄創(chuàng)建postcss.config.js配置  詳見:*/
        postCssPxToRem({
          rootValue: 75,  //1rem大小  px轉(zhuǎn)rem的算法是，設(shè)計稿量的值/設(shè)計稿的寬度=rem的值
          propList: ['*'],  //需要轉(zhuǎn)換的屬性
          mediaQuery: true,  //允許在媒體查詢中生效
        })
      ]
    },
    preprocessorOptions: {
      stylus: {
      /*vite  根據(jù)官檔  @import 引入stylus不生效 需要通過絕對路徑導(dǎo)入 */
        imports: [resolve(__dirname, 'src/stylus/...styl')]  //配置全局變量
      }
    }
  },
  build: {
    minify: 'terser',   //v3 terser 是可選依賴項  需安裝 npm i terser 
    terserOptions: {
      compress: {
        //生產(chǎn)環(huán)境時移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
    /*輸出文件路徑*/
      output: {
        entryFileNames: 'static/js/[name]-[hash].js',
        chunkFileNames: 'static/js/[name]-[hash].js',
        /*靜態(tài)資源篩選*/
        assetFileNames: assetInfo => {
          var info = assetInfo.name.split('.')
          var extType = info[info.length - 1]
          if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
            extType = 'img'
          } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
            extType = 'fonts'
          }
          return `static/${extType}/[name]-[hash][extname]`
        },
      }
    }
  },
})