Vinca@的博客

a.如何在nuxt根目录创建Dockerfile文件，打包时自动复制到构建目录.outputb.构建新镜像(镜像名不能大写)c.安全组端口放行

什么是 postcss-px-to-viewport将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件。为什么使用 postcss-px-to-viewport在pc端盛行的时代 ，如果你不想去适配更多的pc端，可以采用它。由于nuxt3本身已带postcss，所以无需额外安装。

默认情况下，我们作为开发者，在本地开发浏览的是而这个3000端口是可以自定义的在你的nuxt.config.ts更新下面内容port: 8080})执行结果在你的ecosystem.config.cjs 更新以下内容# 端口号设置 8082apps: [执行结果在浏览器打开就可以浏览了当你运行 npm run preview 时且无论你在package.json 怎么给nuxt preview 添加 --port 端口设置都是无效的。

你也许会问有了开发调试本地浏览，为什么还要服务端构建之后在本地浏览？举个简单例子在 Nuxt 3 服务端打包中，由于运行环境不同，无法直接访问process对象。服务端打包通常是在 Node.js 环境中进行的，而process对象是 Node.js 中的全局对象，但在浏览器端不可用。

终端运行generate：预渲染应用程序的每个路由，并将结果存储为纯HTML文件。至此，你可以将 .output/public 文件部署到任何静态托管服务上！网页成功（如果出现布局乱或者页面事件无效说明渲染出错了）打开后，关于站点地图sitemap的配置会在后续更新~（参上图示 -Local 地址）nuxt.config开启ssr。附上我的seo及head代码段。在终端打开命令行，输入。，你就可以在本地浏览啦。设置的动态seo信息或。最后附上我的站点地图。设置的动态头部属性啦。

主要实现点击返回顶部按钮返回至swiper第一个slide。

npm install @nuxtjs/style-resources --save-dev assets/vars/_colors.scssassets/abstracts/_mixins.scsscomponents/Test.vue默认安装是1.2.2版本@nuxtjs/style-resources - npm (npmjs.com)控制台 nuxt.config.ts错报提示，这说明了没有找到支持该字面量的关键词，这时候可以从ts寻找问题通过错误寻找错误的本质：参看

显示屏每次显示swiper-slide的个数，这里建议采用number形式，而不是:slidesPerView="`auto`"，如果采用auto会导致swiper freeMode监听都要去计算，会导致卡顿。默认是ease-out，ease-out会导致每次loop停顿一下。循环播放，如果不设置会导致播放回滚，所以这里必须设置为true。通过伪元素实现双边虚化效果，让整体看起来更顺畅美观。每次播放延迟，设置为0表示不延迟。启用反向自动播放，让上下两层形成视觉差效果。这里采用的是scss语法格式。

在初始加载时，在水合过程完成之前不会获取数据，因此你需要处理一个加载状态，但在随后的客户端导航中，数据将在加载页面之前等待获取。在nuxt项目中，点击产品列表跳转到详情页是正常的，路径为：localhost:3000/product/device?useFetch 组合函数确保一旦在服务器上进行了 API 调用，数据将以有效的方式在负载中传递到客户端。但是这种方法优缺点，就是首次进入的时候会请求2次，虽然解决了页面手动刷新的问题，但这不是一个好的解决方案。但是对着浏览器刷新之后，发现不在执行请求了。

现在，你可以在nuxt.config.ts文件中使用process.env对象来访问全局变量。在nuxt.config.ts文件中引入dotenv库，并调用它的config方法来加载.env文件中的全局变量。在Nuxt.js中，可以使用全局变量来在整个应用程序中共享数据。在NuxtJS中，如何在.env 或 .env.* 使用全局变量来在整个应用程序中共享数据。这样就可以在nuxt.config.ts文件中使用.env配置的全局变量了。

在 nuxtJS项目中使用内置组件 NuxtImg , 按照官方操作如下图进行安装，在npm run dev 时，出现了报错： "ipx" is imported by "node_modules/@nuxt/image/dist/runtime/ipx.mjs", but could not be resolved – treating it as an external dependency."ipx"是一个用于处理图像的库，它可能是在你的项目中被引入的。

然后对app.vue进行保存操作就自动格式化了。json文件不可使用注释 ，如// ， /**/ ， #。在vscode拓展找到Prettier-Code formatter插件，并对它进行安装。3、选择：Prettier - Code formatter。1、快捷键： ctrl + shif + p。在vscode中输入一下命令进行安装。2、输入 format on save。代码格式化配置 、代码格式化忽略。对文件夹和文件做了忽略格式化操作。2、选择使用...格式化文档。在语句末尾打印分号。

然后执行npm run dev ， 将Network 浏览地址发送给自己的手机或者平板，检验后发现没问题，无论你是选择哪一项设置（默认选择：让windows选择计算机的最佳设置），只要勾选。在开发官方网站的时候，临时更换了电脑，发现原本正常的动画效果突然不动了。经过 chrome、Microsoft Edge都无法运行。1、在package.json中添加 --host。通过审查元素后发现类名是注入并且生效的。然后通过其他设备终端去验证。所以问题出在新的设备。窗口内的动画控件和元素。

最近项目遇到设计稿存在第三方字体，要求在静态中实现相应效果。将@font-face代码片段引入项目css文件。点击 “Download” 下载转换结果。将字体文件转换成@font-face。

host文件所在位置：C:\Windows\System32\drivers\etc。2）证实是否@latest导致初始化项目失败。1）在host文件添加的内容是否真实有效；