Vue3+Ts+Webpack编写项目，遇到的问题总结

一、找不到模块“@/assets/images/xxx.png”或其相应的类型声明

原因：ts无法识别png类型

解决办法：在自带的ts文件中进行声明：

二、exports is not defined

原因：暂时不清楚

解决办法：

1、清除包的缓存：删除项目中的package-lock.json和node_modules文件

2、删除项目中环境文件中的VUE_CLI_BABEL_TRANSPILE_MODULES = true

3、重新安装：npm i

在我的项目中使用的失败办法：

1、在index.html文件的头部添加<script>var exports = {}</script>,添加之后报错变成了下面的。

2、添加babel（问题没有解决）：

• ① npm i --save-dev @babel/plugin-transform-modules-commonjs

• ② 在 babel.config.js文件中配置：

module.exports = {
  presets: [
   '@vue/cli-plugin-babel/preset'
   ],
   plugins: [
     [
       '@babel/plugin-transform-modules-commonjs',
     {
       allowTopLevelThis:true,
     },
   ],
 ]
}

3、将所有的模块导出都变成export default（问题没有解决）

———————————————————————————————————————————————————————

package.json文件截图：

vue.config.js文件：

const { defineConfig } = require("@vue/cli-service");
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin"); // 去掉console.log、debugger、注释(webpack5以上自带)
const CompressionPlugin = require("compression-webpack-plugin"); // 压缩文件
// const NodePolyfillPlugin = require("node-polyfill-webpack-plugin"); // webpack5中移除了nodejs核心模块的polyfill自动引入,所以需要手动引入

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "./", // 配置为相对路径
  outputDir: "dist", // 输出文件目录
  assetsDir: "asset", // 生成的静态资源的目录
  productionSourceMap: false, // 不需要生产环境的source Map
  lintOnSave: false, // 保存的时候就检查代码
  // lintOnSave: process.env.NODE_ENV === "development", // 保存的时候就检查代码
  devServer: {
    // 代理
    // disableHostCheck: false,
    port: 8800, // 默认端口号
    compress: true, // 代码是否压缩
    // open: true, // 自动打开浏览器
    proxy: {
      // 配置跨域
      "/api": {
        secure: true, // 如果是https接口，需要配置这个参数
        proxyTimeout: 20 * 60 * 1000,
        timeout: 20 * 60 * 1000,
        target: "http://xxx.xxx.xxx.xxx:80", // 测试服
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        ws: false, // websocket
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
  configureWebpack: {
    name: "名称", // 页面名称重置
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号】
      filename: `asset/js/[name].[hash:6].js`,
      chunkFilename: `asset/js/[name].[hash:6].js`,
    },
    resolve: {
      alias: {
        "@": path.join(__dirname, "src"),
      },
    },
    plugins: [
      // new NodePolyfillPlugin(),
      new CompressionPlugin({
        algorithm: "gzip",
        test: /\.js$|\.ts$|\.html$|.\css/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false, // 不删除源文件
        minRatio: 0.8, // 压缩比
      }),
    ],
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: {
              drop_console: true, // 移除所有的console.*这些函数的调用
              drop_debugger: false, // 移除debugger
              pure_funcs: ["console.log"], // 如果你要移除特定的函数比如console.info ，又想删掉后保留其参数中的副作用，那用pure_funcs来处理
            },
          },
        }),
      ],
    },
  },
});

三、控制台报错：GET http://localhost:8800/undefined 404 (Not Found)

原因：图片在加载的时候可能是空，导致引入出错

解决办法：在引入图片的时候，做一个为空的判断即可（下面是一个判断的例子）。

<div :style="`background: url(${iconUrl || ''}) no-repeat;`"></div>