vue@cli3 打包上线遇到的问题

最新推荐文章于 2024-06-25 13:44:33 发布

weixin_45395412

最新推荐文章于 2024-06-25 13:44:33 发布

阅读量357

点赞数

分类专栏：小白第一次做项目

本文链接：https://blog.csdn.net/weixin_45395412/article/details/100892335

版权

本文记录了使用Vue CLI3打包应用时遇到的问题，包括在真机测试中无明显问题，但在部署到Nginx和Express时的挑战。在Nginx部署时，需修改router的base为dist，并调整vue.config.js的publicPath。在Express部署时，将dist内容放入public文件夹或修改app.js。遇到的问题包括：设置publicPath为相对路径导致404错误，以及在Express中项目图标加载失败。寻求解决此类问题的经验分享。

摘要由CSDN通过智能技术生成

一真机测试

没遇见什么大问题一切正常

二打包vue文件部署到nginx上

npm run build 生成到dist 文件

把生成的dist文件放到放到nginx HTML文件夹里
得修改router 的base为dist
vue.config.js的 publicpath:/dist
配置nginx (conf => nginx.conf)
在这里插入图片描述
浏览器运行localhost/dist

运行正常

部署到express上

可以直接生成一个express项目
然后把dist里面的东西都放到public文件夹里
或者修改app.js 里的
在这里插入图片描述
把public改成dist就可以把dist文件夹放在项目根目录里里
处理跨域用的
const proxy = require(‘http-proxy-middleware’);

app.use(’/api’, proxy({ target: ‘http://39.97.33.178’, changeOrigin: true }));
app.use(’/api2’, proxy({ target: ‘http://localhost:3000’, changeOrigin: true }));