以前也用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，当然放到github上通过GitHub Pages这样也能访问。
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)
javascript:void(null)
然后执行 node server 语句，在浏览器访问 locallhost:9000 这样就行啦,但是别人还是不能在线上访问。
方法三
把生成的dist文件扔给后端，Apache,nginx配置一下...????。
最后讲个npm run build 时出现的一个小问题，项目中的图表库是用的font-awesome,编译完成后在dist/static文件夹中生成了一个font文件夹，当去访问dist文件里的index.html时发现页面上的小图标都不见了，后台报没有找到相对应的的图标，按照报错的提示路径，在dist/stctic /css中新建static文件夹，再把font文件夹剪切到新建的static中后，小图标竟然有了。具体原因应该是webpack打包时路径配置原因。
具体这俩怎么配置还在学习中
就这样，溜了溜了！！！！
网友评论