以前也用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打包时路径配置原因。
具体这俩怎么配置还在学习中
就这样,溜了溜了!!!!