Vue2.0学习系列之项目上线

silenceboy 发布于2019-08-26 12:21 / 1925人阅读

摘要：当你好不容易的做好了一个项目，准备去上线的时候却发现不知道该怎么办时，或者遇到了一些问题，那么来看我这篇文章吧，你会有所收获的。打包项目上线必须要打包。然后我们的打包工作就做完了，可以把我们的整个文件给到后端，或者运维让他们上线。

当你好不容易的做好了一个Vue项目，准备去上线的时候却发现不知道该怎么办时，或者遇到了一些问题，那么来看我这篇文章吧，你会有所收获的。

1：打包

项目上线必须要打包。
命令： npm run build
打包后会生成一个 dist 文件夹，里边有 index.html文件和 static文件夹

打包命令截图如下：

生成文件如下：

现在我们已经打包好了，那么现在让我们打开这个项目吧。
双击 index.html 打开

你会看到一堆的报错，慌不？别着急接着看。通过上图我们可以看到报错的原因是资源路径不对，这时我们需要去修改一些文件了。

在这里把资源的路径由 "/" 改为 "./",因为 "./" 是当前目录下的意思，
没用之前 index.html 里的引入文件是这样的：

这个路径它是找不到的，所以报错了。
改完后是这样的：

此时路径就对了，再双击打开就可以了

这时就没有报错了，正常打开。

2：启动项目。（运行 index.html）

你可以双击打开，也可以用 node 的 anywhere 启动一个静态文件服务器。在 npm 官网搜索就可以找到了，然后安装。

cd 到我们的 dist 文件夹中，然后 anwhere 就可以启动了。

然后我们的打包工作就做完了，可以把我们的整个 dist 文件给到后端，或者运维让他们上线。

3：解决一些错误
第一个：静态资源路径不对的问题
当我在 vue 的 css 里写了一个背景图片，但是 npm run build 后就不太好使了。
截图如下：可以看到，在 npm run dev 时是好的

但是当我打包并且使用 anywhere 启动后

却报错了，它告诉我资源的路径不对，仔细一看我没这个路径呀，我项目也没随便改配置呀，是不是又要拍脑门了，别急，跟我一起来改个配置。
打开我们的 build 文件夹，找到里边的 utils.js 文件，找到第 51 行（目测是的），添加这个代码 publicPath: "../../" ，然后重新打包就可以了，这时资源路径就对了。
更改如下：

效果如下：

我们用审查元素来看一下：这次它就正确的找到了资源的路径，加载出来了资源。

错误写法：

现在知道怎么去解决这个问题了的吧。

好了，本篇博客要到这里结束了。

。。。结束

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108550.html

2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

lily_wang 2019-06-27 16:28 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

chengjianhua 2019-08-29 12:35 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

Anonymous1 2019-08-20 16:31 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

dreamtecher 2019-08-01 16:51 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0