vue项目如何打包Android APK（保姆教程）

需求分析实现vue项目编译打包为Android APK，vue项目是无法直接打包APK的，vue项目需要npm run build 正式打包为H5项目(html、js、css)，使用HBuilderX在把H5项目打包为Android项目。打包步骤一、vue项目编译为H5项目在vue项目根目录下的package.json文件...

egzosn

1636人浏览 · 2024-10-16 16:36:30

egzosn · 2024-10-16 16:36:30 发布

需求分析

实现vue项目编译打包为Android APK，vue项目是无法直接打包APK的，vue项目需要npm run build 正式打包为H5项目(html、js、css)，使用HBuilderX在把H5项目打包为Android项目。

打包步骤

一、vue项目编译为H5项目

在vue项目根目录下的package.json文件中添加打包命令

vue项目如何打包Android APK(保姆教程)_H5

打包的项目输出位置，可以直接在项目根目录下的vue.config.js 文件中进行设置

const webpack = require('webpack');
module.exports = {
	publicPath: process.env.NODE_ENV === 'production' ? './' : './',
	outputDir: 'dist',
	lintOnSave: true,
	filenameHashing: false,
	runtimeCompiler: true, //关键点在这  
	// 调整内部的 webpack 配置。
	// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
	// chainWebpack: () => {},
	// chainWebpack: (config) => {
	//   config.entry('main').add('babel-polyfill')
	// },
	configureWebpack: {
		plugins: [
			new webpack.ProvidePlugin({
				$: "jquery",
				jQuery: "jquery",
				"windows.jQuery": "jquery"
			})
		]
	},
	// configureWebpack: () => {},
	// 配置 webpack-dev-server 行为。
	devServer: {
		open: process.platform === 'darwin',
		host: '0.0.0.0',
		port: 8080,
		https: false,
		hotOnly: false,
		// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
		proxy: null, // string | Object
		before: app => {}
	}
}