vue多页应用安装wp2vite后提示setupProxy.js未配置

[CodeDreamfy]

环境

• mac catalina@10.15.7
• node version@v14.15.4
• yarn version@1.22.10
• wp2vite@1.0.5

问题复现：

在vue项目下，安装wp2vite后执行wp2vite init，提示：

[wp2vite-start]:wp2vite认为是Vue项目
[wp2vite-proxy]:开始处理
[wp2vite-proxy]:无src/setupProxy.js配置文件，处理结束.
[wp2vite-error]:Cannot find module 'glob'

[dravenww]

请安装最新版本，1.0.7，已经修复这个问题，再次尝试， 如果还未修复的话，请提供一个demo，谢谢

[CodeDreamfy]

请安装最新版本，1.0.7，已经修复这个问题，再次尝试， 如果还未修复的话，请提供一个demo，谢谢

你好，我更新了wp2vite的版本，现在新版本为1.0.7，但是仍然报错，如下：

[wp2vite-start]:wp2vite认为是Vue项目
[wp2vite-error]:Cannot find module 'glob'
Require stack:
- /Users/CodeDream/work/deloitte/project/test/ifrs17-frontend/vue.config.js
- /usr/local/lib/node_modules/wp2vite/dist/chunks/dep-fc82bcc9.js
- /usr/local/lib/node_modules/wp2vite/dist/cli.js
- /usr/local/lib/node_modules/wp2vite/bin.js

另外，我这个项目是vue多页项目，不清楚是否有影响

[dravenww]

可否提供一个复现demo？我们看下 或者给一下vue.config.js的配置，根据你提供的错误信息，应该是在运行vue.config.js文件的时候，报错了。

[CodeDreamfy]

可否提供一个复现demo？我们看下 或者给一下vue.config.js的配置，根据你提供的错误信息，应该是在运行vue.config.js文件的时候，报错了。

以下是项目的vue.config.js文件

const glob = require('glob');
const path = require('path');
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');

function resolve(dir) {
  return path.join(__dirname, dir);
}
//配置pages多页面获取当前文件夹下的html和js
function getEntry(globPath) {
  const regex = /(plugins|views){1,}?/gi;
  let entries = {},
    tmp,
    htmls = {};
  // 读取src/pages/**/底下所有的html文件
  glob.sync(globPath + 'html').forEach(function(entry) {
    if (regex.test(entry)) {
      return;
    }
    tmp = entry.split('/').splice(-3);
    htmls[tmp[1]] = entry;
  });

  // 读取src/pages/**/底下所有的js文件
  glob.sync(globPath + 'js').forEach(function(entry) {
    if (regex.test(entry)) {
      return;
    }
    tmp = entry.split('/').splice(-3);
    entries[tmp[1]] = {
      entry,
      template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html', //  当前目录没有有html则以共用的public/index.html作为模板
      filename: tmp[1] + '.html', //  以文件夹名称.html作为访问地址
      chunks: [
        tmp[1],
        'chunk-vendors',
        'chunk-common',
        'chunk-element-ui',
        'chunk-echarts',
        'zrender',
      ],
    };
  });
  return entries;
}
let htmls = getEntry('./src/pages/**/*.');
module.exports = {
  pages: htmls,
  publicPath: './',
  runtimeCompiler: true,
  productionSourceMap: false,
  parallel: true,
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        _: 'lodash',
      }),
      // gzip压缩
      new CompressionPlugin(),
    ],
    resolve: {
      alias: {
        _: 'lodash',
      },
    },
  },
  outputDir: process.env.VUE_APP_DIST || 'dist', //
  devServer: {
    host: '0.0.0.0',
    open: true,
    index: '/index.html', //  默认启动页面
    proxy: {
      '/mock': {
        target: 'http://localhost:3000/', // 需要请求的地址
        changeOrigin: true,
        pathRewrite: {
          '^/mock': '',
        },
      },
    },
  },
  chainWebpack(config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end();
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
      .end();
    if (process.env.NODE_ENV === 'production') {
      // 删除系统默认的splitChunk
      config.optimization.delete('splitChunks').end();
    }
  },
  configureWebpack: (config) => {
    //关闭 webpack 的性能提示
    config.performance = {
      hints: false,
      maxEntrypointSize: 512000,
      maxAssetSize: 512000,
    };

    // 给输出的js名称添加hash
    config.output.filename = '[name].[hash].js';
    config.output.chunkFilename = '[name].[hash].js';
    config.optimization = {
      splitChunks: {
        cacheGroups: {
          // 抽离所有入口的公用资源为一个chunk
          common: {
            name: 'chunk-common',
            chunks: 'initial',
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true,
            enforce: true,
          },
          // 抽离node_modules下的库为一个chunk
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            priority: 2,
            reuseExistingChunk: true,
            enforce: true,
          },
          // element-ui单独处理出来
          element: {
            name: 'chunk-element-ui',
            test: /[\\/]node_modules[\\/]element-ui[\\/]/,
            chunks: 'all',
            priority: 3,
            reuseExistingChunk: true,
            enforce: true,
          },
          // echarts
          echarts: {
            name: 'chunk-echarts',
            test: /[\\/]node_modules[\\/](vue-)?echarts[\\/]/,
            chunks: 'all',
            priority: 4,
            reuseExistingChunk: true,
            enforce: true,
          },
          // 由于echarts使用了zrender库，那么需要将其抽离出来，这样就不会放在公共的chunk中
          zrender: {
            name: 'zrender',
            test: /[\\/]node_modules[\\/]zrender[\\/]/,
            chunks: 'all',
            priority: 3,
            reuseExistingChunk: true,
            enforce: true,
          },
        },
      },
    };
  },
};

[dravenww]

你好，看你的vue配置文件，文件前面引用了glob；请尝试安装该模块后，重试，谢谢

[IndexXuan]

@CodeDreamfy vue-cli 项目可以尝试下这个 https://github.com/IndexXuan/vue-cli-plugin-vite

[CodeDreamfy]

你好，看你的vue配置文件，文件前面引用了glob；请尝试安装该模块后，重试，谢谢

好的额~ 我的项目中webpack是使用了glob的，所以这个依赖是装了的，是否需要全局装glob？

[CodeDreamfy]

@CodeDreamfy vue-cli 项目可以尝试下这个 https://github.com/IndexXuan/vue-cli-plugin-vite

好的，谢谢推荐

[dravenww]

你好，看你的vue配置文件，文件前面引用了glob；请尝试安装该模块后，重试，谢谢

好的额~ 我的项目中webpack是使用了glob的，所以这个依赖是装了的，是否需要全局装glob？

glob需要在package.json里面有显式的声明，安装一下，再试试