vue项目如何自定义配置

常用配置项总结归纳

配置自定义路径

首先，要进入path模块

npm install path -save

Vue2.x

// 在配置文件中加入配置项即可
const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
    chainWebpack:(config)=>{
        config.resolve.alias
        .set('@',resolve('src'))//参数1,设置的别名,参数2：设置的路径
    }
}

vue3(未验证)

vue3更新以后，在项目中深度集成了webpack，在项目中已经找不到配置文件的身影，开发者需要在项目根目录自行创建vue.config.js文件

新建vue.config.js文件

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        src: "@"
      }
    }
  }
};

常用配置文件参考

Vue2.x

/**
 * 配置参考:
 * https://cli.vuejs.org/zh/config/
 */
// const url = 'http://192.168.88.211:9999'  // 测试环境
const url = 'http://test.seehoo.com'     //生产环境
const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: config => {
    config.resolve.alias.set('@',resolve('src'))//参数1,设置的别名,参数2：设置的路径
    // 忽略的打包文件
    config.externals({
      'axios': 'axios'
    })
  },
  // 配置转发代理
  devServer: {
    disableHostCheck: true,
    port: 8080,
    proxy: {
      '/': {
        target: url,
        ws: false, // 需要websocket 开启
        pathRewrite: {
          '^/': '/'
        }
      }
      // 3.5 以后不需要再配置
    }
  }
}

vue3—-vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { fileURLToPath, URL } from 'url'
  
export default defineConfig({
    base: "./",
    plugins: [
        vue(),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
    // 这里是将src目录配置别名为 /@ 方便在项目中导入src目录下的文件
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
    // 强制预构建插件包
    optimizeDeps: {
        include: ["axios"],
    },
    // 打包配置
    build: {
        target: "modules",
        outDir: "../lg", //指定输出路径
        assetsDir: "assets", // 指定生成静态资源的存放路径
        minify: "terser", // 混淆器，terser构建后文件体积更小
    },
    // 本地运行配置，及反向代理配置
    server: {
        cors: true, // 默认启用并允许任何源
        open: true, // 在服务器启动时自动在浏览器中打开应用程序
        //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
        proxy: {
            "/api": {
                target: "https://ioolm.com", //代理接口
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ""),
            },
        },
    },
});

vue