根据以下命令对项目进行打包:
npm run build
命令执行完出现
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
看了一下,build complete,嗯完成了,后面的也没有看,直接打开了生成的dist文件夹下的index.html
打开后出现一个空白页面,并且控制台是上面这样的。
在网上查了很多,基本都是在config/index.js中改路径。那么问题来了vue cli 3.0没有build和config 啊,那去哪里改?
最后发现直接在根目录下vue.config.js(如果没有这个文件的话,可以直接在更目录中添加一个,配置参考)文件中进行修改。
将baseUrl属性的值'/'改为'./'。
module.exports = {
// 基本路径
baseUrl: './',
// 输出文件目录
outputDir: 'dist',
// webpack-dev-server 相关配置
devServer: {
port: 8888,
},
}
改好之后就可以直接在本地打开index.html了。
额。。。打开是打开了 ,可是问题又来了,我的登录页面需要请求cookie,但是在这里get返回的是个空。。。。好像是因为filex协议的问题。并且在部署里(也就是在执行完npm run build 之后提示的连接中)也说明了dist 目录需要启动一个 HTTP 服务器来访问,所以以 file:// 协议直接打开 dist/index.html 是不会工作的。
不知道为什么我运行下面命令不起作用:
npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist
就在网上查看了一下,我用了其中一种方法(参考):
执行下面命令:
npm install http-server -g 全局
然后在dist文件下执行:
http-server
直接打开上面的网址访问就可以了。