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 
版权声明:本文为博主原创文章,转载请附上博文链接!

展开阅读全文

没有更多推荐了,返回首页