vue-cli打包发布的问题

vue-cli的项目开发完成后,发布前将进行打包工作,项目文件夹执行npm run build将vue框架编写的程序转换为最基础的html,css,js等。转换过程中本人遇到了一些问题,整理记录下:

  • 生成文件的引号被省略问题:

    设置build/webpack.prod.conf.js的属性removeAttributeQuote:false

  • html引用路径为绝对路径问题:

    修改config/index.js中的build:{}里面assestsPublicPath为assetsPublicPath:’./'

  • 包含外网地址问题:

    将项目中的外部引用方式修改为本地引用方式

  • 生成文件被压缩问题:

    注释掉build/webpack.prod.conf.js的 new UglifyJsPlugin()去除生成js的压缩效果;

    注释掉build/webpack.prod.conf.js的new OptimizeCSSPlugin()去除生成css的压缩效果;

    修改build/webpack.prod.conf.js的new HtmlWebpackPlugin()中minify:false去除html的压缩

  • 生成文件加入时间戳:

    在build/webpack.prod.conf.js中创建

    var date= new Date();
    const Version=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"_"+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds();
    

    并在output:{}的fileName中进行拼接:

    filename: utils.assetsPath(‘js/[name].[chunkhash].’+Version+’.js’),
    chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].’+Version+’.js’)

回答: 使用vue-cli进行打包发布可以按照以下步骤进行操作。首先,使用vue-cli创建模板项目,可以通过运行命令`vue init webpack`来初始化项目。在初始化过程中,可以选择是否加载依赖vue-router和是否使用ESLint进行代码规范检查。接下来,可以使用命令`npm run build`或`yarn build`来进行项目打包打包完成后,可以将打包后的文件部署到静态服务器或动态web服务器(如tomcat)上进行发布。如果选择静态服务器部署,可以使用静态服务器工具包进行部署;如果选择动态web服务器部署,可以按照tomcat部署的方式进行操作。另外,如果需要将代码上传到GitHub,可以使用git命令进行上传和更新。具体的上传和更新步骤可以参考相关文档或使用VSCode进行操作。最后,如果需要关闭ESLint代码规范检查,可以在项目配置文件中进行相应的设置。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *3* [vue-cli创建vue项目&打包发布&上传/更新github&ESLint代码规范](https://blog.csdn.net/qq53167889/article/details/108254905)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue-cli2 + webpack搭建vue项目流程以及打包发布流程](https://blog.csdn.net/qq_35321405/article/details/89514492)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值