vue使用@根目录路径引入及vue打包之后出现空白页的原因以及解决方式及打包报entrypoint size limit: The following entrypoint(s) combined a

第一步：安装一下path

npm install path --save

第二步：在vue.config.js文件中配置一下

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src")) 
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("base", resolve("baseConfig"))
      .set("public", resolve("public"));
  },
  configureWebpack: {
        resolve: {
          alias: {
            '@': resolve('src') //配置根目录的@方法
          }
        }
      },
}

原文连接：vue使用@根目录路径引入_*~Love~菲~*的博客-CSDN博客_vue引用根目录文件

二 vue打包之后出现空白页的原因以及解决方式

通过vue cli 创建项目，并npm run build 打包后，在文件夹 dist 中点击index.html出现空白页面，且在终端中报错了

报错实例如下：

出现上述问题的主要原因是路径问题

解决办法：在配置文件vue.config.js中添加如下代码

 

 原文链接：vue项目打包后，打开页面为空白的解决办法_IsAnSir的博客-CSDN博客_vue项目打包后打开空白解决办法

三  entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

webpack打包提示文件体积过大导致
The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

修改下打包时的配置

config["performance"] = {
  "maxEntrypointSize": 10000000,
  "maxAssetSize": 30000000
}

具体：vue.config.js中

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
  assetsDir: "static", //放置生成的静态文件目录（js css img）
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件

  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...
      config.mode = 'production';
      config["performance"] = {//打包文件大小配置
        "maxEntrypointSize": 10000000,
        "maxAssetSize": 30000000
      }
    }
  }
}

原文链接：https://blog.csdn.net/weixin_45503820/article/details/108102304