关于vue-cli生成的dist 文件怎么访问的问题

以前也用vue-cli 写过大大小小不少项目，可是只会 npm run dev 这种方式启动，想给别人在线上展示，但是一直不知道怎么办，最近又用vue-cli 写了个 仿肯德基宅急送的移动端项目，基本框架搭起来了,后续功能还有待完善。

若是电脑浏览请调成手机模式，该项目采用的是下面的方法一。

技术栈

vue-cli+vue-router+axios+vuex+better-scroll+font-awesome+flex+less

演示地址：https://polangsanye.github.io/kfc/dist/index.html

github地址：https://github.com/polangsanye/kfc

欢迎issues和star

正题

好现回到正题上来 解决dist文件到底怎么访问的问题

---

方法一 : 方法一呢就是在执行 npm run build 之前先把config里面的index.js 文件夹中的build对应的 assetsPublicPath: '/' 绝对路径改成相对路径即： assetsPublicPath: './' ,这样就ok 啦 这样打包完之后 直接双击生成后的dist目录下面的index.html，就能看到你想要的结果啦，或者直接放到服务器上，通过地址指到dist文件夹下面的index.html，这样也能访问。

build: { ... assetsPublicPath: './', ... }

---

方法二 在项目最下面新建一个js文件夹，如serve.js，然后用express起一个本地服务器代码如下：

var express = require('express') var app = express() app.use(express.static("./dist")); app.get('./',（req,res）=> { res.sendFile("./index.html"); }) app.listen(9000)

然后执行 node server 语句，在浏览器访问 locallhost:9000 这样就行啦,但是别人还是不能在线上访问。

---

方法三

把生成的dist文件扔给后端，nginx配置一下...????。

最后讲个npm run build 时出现的一个小问题，项目中的图表库是用的font-awesome,编译完成后在dist/static文件夹中生成了一个font文件夹，当去访问dist文件里的index.html时发现页面上的小图标都不见了，后台报没有找到相对应的的图标，按照报错的提示路径，在dist/stctic /css中新建static文件夹，再把font文件夹剪切到新建的static中后，小图标竟然有了。具体原因应该是webpack打包时路径配置原因。

具体这俩怎么配置还在学习中 就这样，溜了溜了！！！！

转载于:https://juejin.im/post/5a2fa31e5188252ae93aea5f