[干货篇]Vue项目打包

发布网友发布时间：2024-10-05 09:44

共1个回答

热心网友时间：2024-12-12 23:45

Vue项目打包对于基于webpack和vue-cli的开发者来说，命令是简单的，即执行 "npm run build"，打包完成后，你会发现dist文件夹在项目根目录下，这里存放了项目的全部内容。

重要的是，这个打包过程适用于由"vue init webpack"初始化的完整版vue-cli项目，而非"vue init webpack-simple"创建的简化版项目，后者由于缺乏必要的build和config文件夹，无法进行打包操作。

打包时，了解项目的目录结构是关键。对于vue init webpack的典型结构，build和config负责配置，而静态文件则存放于static文件夹中。而"webpack-simple"初始项目则缺少这些关键文件夹。

对于新手而言，可能会遇到一些打包问题。首先，打包完成后，可以通过本地直接打开文件夹，或通过编辑工具以浏览器方式打开进行测试。然而，如果打开网站后页面空白，那可能是路径配置问题。你需要在config/index.js的build参数中，将assetsPublicPath的'/'更改为'./'，重新打包并刷新页面。

另一个常见问题是CSS中的背景图片或图标加载失败，这需要在build/utils.js中查找并调整ExtractTextPlugin.extract的引用路径设置。

如果遇到未知的错误导致无法发布，可能需要通过其他方式，比如图片，来分享问题。