vue3 函数统一调用如jquery，lodash，moment，echarts

最新推荐文章于 2024-05-30 16:25:18 发布

仗剑我辈

最新推荐文章于 2024-05-30 16:25:18 发布

阅读量451

点赞数

分类专栏： vue3.0

本文链接：https://blog.csdn.net/sonight_top/article/details/117821803

版权

Vue Webpack ProvidePlugin lodash 自动加载

关键词由CSDN通过智能技术生成

vue3.0 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

和vue2一样

这里以lodash为例

1.挂包

cnpm install lodash --save

2.在vue.config.js中挂载webpack

const webpack = require("webpack");

3.在export中configureWebpack自动加载

  configureWebpack: {
    plugins: [
      //自动加载模块，而不是起别名，别名需要import，而自动加载的模块不需要import既可以使用
      new webpack.ProvidePlugin({
        _: "lodash",
        echarts: "echarts",
        moment: "moment",
        $: "jquery",
      }), 
    ],
  },

整体代码

const webpack = require("webpack");
const path = require("path");

const resolve = subDir => path.join(__dirname, subDir);
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
//const global = ruquire("/src/config")


module.exports = {
  //  基本路径
  publicPath: "/",
  //publicPath: IS_PROD ? process.env.VUE_APP_PUBLIC_PATH : "./", // 默认'/'，部署应用包时的基本 URL
  //  构建时的输出目录
  outputDir: "dist",
  //  放置静态资源的目录  相对于outputDir的静态资源(js、css、img、fonts)目录
  assetsDir: "assets",
  //  html 的输出路径
  indexPath: "h5.html",
  //文件名哈希
  filenameHashing: true,
  lintOnSave: false, //是否开启eslint
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: !IS_PROD, // 生产环境的 source map
  parallel: require("os").cpus().length > 1,
  pwa: {},

  devServer: {
    open: true, //是否自动弹出浏览器页面
    host: '0.0.0.0', //表示启动的时候使用的域名，默认可以不写，则是使用localhost和本机IP
    port: 8084,
    https: false,
    hotOnly: false, //是否开启热更新

    proxy: {
      "/mobile": {
        // 接口代理
        target: "http://1.1.1.1:8080",
        // target: "http://www.baidu.com:8080",
        //target: process.env.BASE_URL,
        changeOrigin: true, // 是否跨域，虚拟的站点需要更管origin
        logLevel: "debug",
        secure: false, // 如果是https接口，需要配置这个参数
        pathRewrite: { // pathRewrite 来重写地址

        },  
      },
    },
  },
  configureWebpack: {
    plugins: [
      //自动加载模块，而不是起别名，别名需要import，而自动加载的模块不需要import既可以使用
      new webpack.ProvidePlugin({
        _: "lodash",
        echarts: "echarts",
        moment: "moment",
        $: "jquery",
      }), 
    ],
  },

  chainWebpack: config => {
    // 修复HMR 
    config.resolve.symlinks(true);
    config
      .plugin("ignore")
      .use( //只用moment 的中文包
        new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/)
      );

    // 添加别名
    config.resolve.alias
      //.set("@", resolve("src"))  //@ is an alias to /src 这个框架默认
      .set("@libs", resolve("src/libs"))
      .set("@views", resolve("src/views"))
      .set("@static", resolve("static"))
  
  },
};