第三步、打包命令配置。通过 ./node_modules/webpack/bin/webpack.js --config webpack.config.js 这条命令来进行打包,除了使用 --config 配置参数外,还可以通过 --help 查看其它命令参数:为了避免每次都要写 ./node_modules/webpack/bin/webpack.js --config webpack.config.js 这么一长串的命令,可以使用 npm scripts 来简化操作,修改 package.json 中的 scripts 属性,添加 build,执行命令npm run bulid 即可进行打包:“scripts”: {。“build”: “npx webpack --config webpack.config.js”
真实的项目中踩过坑,若想在 setup 中调用异步请求,需在 setup 前加async关键字。这时,会受到警告async setup is used without a suspense boundary。
对所有的资源都会压缩等优化操作,在开发过程中,提供了一套完整的功能,能够使开发效率更高。vue-cli 3 已经发布一段时间了,现在安装脚手架,都会安装 Vue-cli 3.x 版本,如果我们想要使用 vue-cli 2.x 版本时,需要拉去 vue-cli 2.x 的模板,使用命令如下:此时,就可以开始使用 vue-cli 2 创建项目了。
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。vue-cli 是 Vue 早期推出的一款脚手架,使用 webpack 创建 Vue 项目,可以选择安装需要的各种插件,比如 Vuex、VueRouter等。
proxy 代理主要是通过 篡改本地浏览器的访问接口时的 服务器地址前缀 达到欺骗本地浏览器的 CORS验证,绕过CORS 验证的一种方式,proxy 代理只能解决本地开发过程中,浏览器与服务器之间的跨域,上线时一般都是通过 Nginx 做反向代理实现 和proxy 相似的功能和作用 proxy 代理是 webpack的 插件 : webpack-devserve 插件的功能,所以需要覆盖部分webpack 配置 在vue-cli 项目中,webpack的配置文件被隐藏起来了,如果需要重新webpack的配置的话,vue-cli 项目提供了 vue.config.js配置文件来重新 已经定义好的webpack 配置。
module 是指 package.json 里面的 name,如使用是 Vant 对应的 module 为@vant/weapp,如果使用是 iview,刚对应的 module 为 iview-weapp,具体可看它们各自的 package.json。
上篇《尤雨溪是个恶魔,Vite 三天 10 更》谈到了 Webpack 这一系列打包工具出现的原因。这些工具的出现是为了解决 ES Modules 模块系统本身的环境兼容问题、以及零散的模块文件导致的频繁网络请求发送和模块化发散的问题等等。