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

若如初见. 提交于 2020-04-07 02:34:06

虽然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前面的“/"删掉,解决。

 

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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!