There is no page file after the uniapp h5 program is packaged

The latest version of uniapp may encounter the problem of no page file when packaging h5 programs. This article will analyze the solution for everyone.

Problem description

When using the latest version of uniapp to package an h5 program, there will be a situation where the program packaging is completed, but no page can be accessed in the browser. After investigation, it was found that the required page file was missing from the packaged program folder.

Cause of the problem

After investigation, it was found that there was a bug in the latest version of uniapp when packaging, resulting in the page file not being included in the package after the packaging was completed. This bug usually occurs when using the latest version of vue-router.

Solution

Currently, uniapp has not officially provided a method to fix this problem, but we can solve this problem through the following methods:

1. Reduce vue- router version

Since this problem usually occurs in the latest version of vue-router, we can downgrade it to an earlier version. The specific steps are as follows:

• Execute the following command to downgrade vue-router: npm install vue-router@x.x.x (x.x.x is the corresponding version number, it is recommended to choose version 3.0.7 )
• In the main.js file of the project, modify the reference statement of vue-router to: import VueRouter from 'vue-router/dist /vue-router.common.js'

2. Custom webpack configuration

If downgrading vue-router still does not solve the problem, we can try to customize webpack Configuration to fix.

In the project root directory, create a vue.config.js file and enter the following code:

const path = require('path');

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

In the above code, we pass CopyWebpackPluginThe plug-in copies all files in the project's src/pages directory to the dist/pages directory, ensuring that the page folder contains all necessary files after the packaging is completed.

3. Install legacy-cli

If the above two solutions do not solve the problem, we can try to use the legacy-cli command line tool.

• First install the legacy-cli command line tool: npm install -g legacy-cli
• Then execute the following command to package the program: legacy-cli build --mode development

After the above steps, we can ensure that the packaged program folder contains all necessary page files.

Conclusion

The above is the solution to the problem that there is no page file after the uniapp h5 program is packaged. Although this problem may confuse and annoy us, with a few simple steps, we can solve this problem and ensure the normal operation of the program.

The above is the detailed content of There is no page file after the uniapp h5 program is packaged. For more information, please follow other related articles on the PHP Chinese website!