vue-cli构建项目npm run build打包后怎么在本地查看效果

这时如果直接运行npn run build是可以运行并打包你的代码的,不会报任何异常或错误,但是会看到打包完成有这样一句提示:

打开了控制台,看到console tab下一片404的各种找不到资源

 

解决方案

打开项目文件夹。找到config文件夹里的index.js文件中的build对象,将assetsPublicPath中的“/”,改为“./”,并在build\build.js将这两句的提示信息删掉或注释掉,再打包直接用浏览器直接运行就好了。

 

vue-cli 打包之后图片引用路径问题

 

先来看下报错:

首先看下我项目的dist目录:

按理说,这个img的路径应该是https://xxxxxxxxxxxxxx/dist/static/img/xxx.xxxxxx.png,但是很明显路径就成了https://xxxxxxxxxxxxxx/static/css/static/img/xxx.xxxxxx.png,首先应该可以确定是打包的时候出现了什么问题。

其实很简单。打开/build/utils.js文件,找到这段代码:

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
1
2
3
4
5
6
7
8
9
10
11
加上红框内容:publicPath: '../../',当然这个路径是根据自己项目的实际情况来的

再次npm run build就可以看效果啦。
--------------------- 
作者:AmberWu 
来源:CSDN 
原文:https://blog.csdn.net/AmberWu/article/details/80169271 
版权声明:本文为博主原创文章,转载请附上博文链接!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值