uniapp h5 프로그램을 패키징한 후 페이지 파일이 없습니다.

PHPz

풀어 주다： 2023-05-22 10:50:37

원래의

1145명이 탐색했습니다.

최신 버전의 uniapp에서는 h5 프로그램을 패키징할 때 페이지 파일이 없는 문제가 발생할 수 있습니다. 이 기사에서는 해결 방법을 분석해 보겠습니다.

문제 설명

최신 버전의 uniapp을 사용하여 h5 프로그램을 패키징할 경우, 프로그램 패키징은 완료되었으나 브라우저에서 페이지에 접근할 수 없는 상황이 발생합니다. 조사 결과, 패키지된 프로그램 폴더에 필요한 페이지 파일이 누락된 것으로 나타났습니다.

문제 원인

조사 결과 최신 버전의 유니앱에서 패키징 시 버그가 발생하여 패키징 완료 후 페이지 파일이 패키지에 포함되지 않는 것으로 확인되었습니다. 이 버그는 일반적으로 최신 버전의 vue-router를 사용할 때 발생합니다.

해결 방법

현재 uniapp에서는 이 문제에 대한 해결 방법을 공식적으로 제공하지 않았으나, 다음과 같은 방법으로 문제를 해결할 수 있습니다.

1 vue-router 버전을 줄입니다.

이 문제는 주로 vue- 최신 버전의 라우터에서는 이전 버전으로 다운그레이드할 수 있습니다. 구체적인 단계는 다음과 같습니다.

다음 명령을 실행하여 vue-router를 다운그레이드합니다: npm install vue-router@x.x.x (x.x.x는 해당 버전 번호이므로 버전 3.0을 선택하는 것이 좋습니다. 7) npm install vue-router@x.x.x（x.x.x为对应版本号，建议选择3.0.7版本）
在项目的main.js文件中，将vue-router的引用语句修改为：import VueRouter from 'vue-router/dist/vue-router.common.js'

2. 自定义webpack配置

如果降级vue-router仍未解决问题，我们可以尝试通过自定义webpack配置来修复。

在项目根目录下，创建一个vue.config.js文件，并输入以下代码：

const path = require('path');

module.exports = {
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                {
                    from: path.resolve(__dirname, './src/pages'),
                    to: path.resolve(__dirname, './dist/pages')
                }
            ])
        ]
    }
}

로그인 후 복사

以上代码中，我们通过CopyWebpackPlugin插件将项目的src/pages目录下的所有文件拷贝至dist/pages目录下，确保打包完成后页面文件夹中包含所有必备文件。

3. 安装legacy-cli

如果以上两种方案均未解决问题，我们可以尝试使用legacy-cli命令行工具。

首先安装legacy-cli命令行工具：npm install -g legacy-cli
接着执行以下命令打包程序：legacy-cli build --mode development

main.js

vue-router

import VueRouter from 'vue-router/dist /vue-router.common.js'

2. 사용자 정의 웹팩 구성

vue-router를 다운그레이드해도 문제가 해결되지 않으면 사용자 정의 웹팩 구성을 통해 문제를 해결할 수 있습니다.

프로젝트 루트 디렉터리에서 vue.config.js 파일을 생성하고 다음 코드를 입력하세요. 🎜rrreee🎜위 코드에서는 CopyWebpackPlugin 플러그인을 사용하여 프로젝트 복사 src/pages 디렉터리의 모든 파일을 dist/pages 디렉터리로 복사합니다. 패키징이 완료된 후 페이지 폴더에 필요한 모든 파일이 포함되어 있는지 확인하세요. 🎜🎜3. 레거시-cli 설치🎜🎜위의 두 가지 해결 방법으로 문제가 해결되지 않으면 legacy-cli 명령줄 도구를 사용해 볼 수 있습니다. 🎜🎜🎜먼저 legacy-cli 명령줄 도구를 설치하세요: npm install -g Legacy-cli🎜🎜그런 다음 다음 명령을 실행하여 프로그램을 패키징하세요: legacy -cli 빌드 - -모드 개발🎜🎜🎜위 단계 후에 패키지된 프로그램 폴더에 필요한 모든 페이지 파일이 포함되어 있는지 확인할 수 있습니다. 🎜🎜결론🎜🎜위는 uniapp h5 프로그램을 패키징한 후 페이지 파일이 없는 문제에 대한 해결 방법입니다. 이 문제가 우리를 혼란스럽게 하고 짜증나게 할 수도 있지만, 몇 가지 간단한 단계를 통해 이 문제를 해결하고 프로그램의 정상적인 작동을 보장할 수 있습니다. 🎜

위 내용은 uniapp h5 프로그램을 패키징한 후 페이지 파일이 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!