vue-cil的日常----webpack打包上线有关问题

最新推荐文章于 2024-02-05 19:13:28 发布

aiqqvb

最新推荐文章于 2024-02-05 19:13:28 发布

阅读量955

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/aiqqvb/article/details/80792119

vue 专栏收录该内容

5 篇文章

订阅专栏

在使用Vue CLI进行npm run build打包上线时遇到了资源加载失败和CSS文件过大的问题。解决方法包括修改assetsPublicPath为'./'，设置productionSourceMap为false以取消调试文件，以及限制CSS中图片大小避免转换为base64。对于CSS文件过大的问题，尝试了分割CSS和调整后端数据接收限制的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm run build

打包后上传，页面不显示，打印错误信息：

Failed to load resource: net::ERR_FILE_NOT_FOUND

资源加载不了了，网上查找解决方法：

找到config里的index.js,打开修改assetsPublicPath 为“./”

依然不显现，继续查找：

将webpack.prod.conf.js 中output添加参数publicPath:'./'

打包后上传，页面正常显示，问题解决。

取消调试文件

config:index.js中：

productionSourceMap值为flase

打包后css文件过大导致有些浏览器读取失败

目前想到的是减少css文件大小

方法一：

限制css中img icon等的大小limit，防止编译为base64图片增加文件空间；在webpack.base.conf.js

 module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1024,（此处）
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1024,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1024,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
    ]
  },