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