vue-cli 3.0以上打包部署过程

最新推荐文章于 2025-03-07 15:28:08 发布

菱玉

最新推荐文章于 2025-03-07 15:28:08 发布

阅读量574

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43878003/article/details/117327484

版权

本文介绍了Vue CLI 3.0及以上版本的项目打包部署步骤，包括在vue.config.js中设置配置，并将dist文件上传至服务器。针对刷新页面出现404的问题，提出通过设置路由模式为'hash'来解决，如`mode: 'hash', base: process.env.BASE_URL`。当使用'history'模式时，需要后台服务器如nginx进行额外配置。" 117487721,11067860,使用HttpHandler在EntityFramework中添加水印和二维码,"['C#', 'Web开发', '图像处理', '安全验证']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

找到package.json
在这里插入图片描述
在对应的vue的项目目录下面新建vue.config.js
写入下面的配置

module.exports = {
	publicPath: '/h5/dist/',  //代表部署的域名访问的目录   
	outputDir: 'dist',//打包后在当前目录下生成打包后的dist文件,把dist文件放置到对应的域名/h5/下面即可
	assetsDir: 'static',
	lintOnSave: false,
	productionSourceMap: false //去除打包后js的map文件
}
 cd mytest
 执行：npm run build 进行打包

在这里插入图片描述然后把dist文件放到对应的项目服务器的对应目录下面，下面以域名+/h5/dist/为例

https://test.okall.com.cn/h5/dist/#/ 既可以运行