vue项目打包

vue项目打包

     打包命令为：npm run build

    执行完之后我们的vue项目目录下会生成一个dist文件，里面存放一个index.html和一个static文件夹，这个文件夹中主要是用来存放我们的css，images,js等文件，然后我们需要先在我们自己本地预览在没有问题的情况下我们就可以把我们的dist文件夹丢给后台小哥哥或者小姐姐上线啦~~~哈哈哈，不过貌似一般都是小哥哥的吧~~~

   本地预览的时候可以直接打开dist文件下面的index.html,这个时候我们打开的时候会发现页面是空白情况，而且我们的地址栏中根本没有携带我们的路由，如下

这个是因为我们打包之后路径错误所造成的，所以我们需要在config文件夹下的index.js中寻找问题。

这时候我们可以看到assetsPublicPath，它的值为‘/’。意思是根目录，这时会从index.html所在的硬盘的根目录下开始查找，自然无法找到。这时候我们将  ' / ' 改为 './ ' 这时候绝对路径就改为了相对路径，意思为从同文件夹下开始寻找，

 

然后我们重新打包，这时候页面不出意外就能正常运行，但是发现有一些图片请求失败，这时候我们需要打开build文件夹下边的utils.js文件。

在图片代码的位置增加      publicPath:'../../'   即可解决问题

然后我们重新打包，这个时候就没有任何问题了~~~~

 

如果我们的项目中使用了elementUI，然后我们修改的某些样式没有起作用，这个时候我们就要考虑是不是权重的问题，增加权重就够了，比如我的：

 

嗯，，打包发布完之后记得把index.js和utils.js下修改的两处地方复原，不然我们本地npm run dev的时候会发现控制台报错404,~~~