首页 > 代码库 > 总结一下最近使用vue构建项目时遇到的坑

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

虽然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=http://www.mamicode.com/static/js/manifest.4556eb0998075bdd0762.js>

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

 

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

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