总结一下最近使用vue构建项目时遇到的坑

Posted 2020-09-22

虽然vue-cli提供了很方便的脚手架来构建自己的项目，但是在实际开发过程中，我还是遇到了一些问题，现将其摘要如下：

1、使用npm run build命令后会将我们的代码压缩至dist文件夹内，dist文件夹内目录如下：

此时直接打开index.html是无法打开的，我的解决办法是将其放在本地tomcat服务器内，然后通过启动bin/startup.bat启动服务器，即可以在浏览器正常调试。

2、打开后发现有一些图片没有显示，有一些压缩为base64，一些没有被压缩，检查后发现是图片文件过大，与build文件夹内webpack.base.conf.js配置不匹配有问题，

{
        test: /\\.(png|jpe?g|gif|svg)(\\?.*)?$/,
        loader: ‘url-loader‘,
        options: {
          limit: 10000000,
          name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
        }
      },

将此处的limit值变大后正常显示

3、index.html内的js文件路径报错，

src=/static/js/manifest.4556eb0998075bdd0762.js>

此处将static前面的“/"删掉，解决。

 

本文所提的方法只是我在项目中的处理，如果有更好的办法，望指正