Vue3.0的项目部署,以及利用Cordova打包app运行到真机

普通vue项目的部署

1. 在vue3.0中部署的配置文件又换了一个地方，在vue.co在这里插入代码片nfig.js加入这样的话

	module.exports = {
	    publicPath: './',
	    outputDir: 'dist',
	    assetsDir: 'static'
	}

2. 在项目根目录中的src/router/index.js，修改

const router = new VueRouter({
	//mode: 'history',
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

3. 进入控制台，cd 到项目根目录中

	npm run build
	or
	yarn build

4. Cordova环境搭建

确保android环境搭建好了，jdk，sdk，gradle
安装了node环境
$ npm install cordova -g
$ cordova create hello com.briup.hello 我的App

5. 上面这一步容易出错
   解决办法找到cordova项目将其node_modules删除后重新获取一下依赖
   
6. 添加平台

$ cd hello
$ cordova platform add android
#添加安卓环境，还有很多，例如ios 自行去cordova官网查询
$ cordova platform ls

7. 检测当前平台环境是否可用。

$ cordova requirements

成功截图

8. 运行真机，此时手机端一定要开启手机的开发者模式，usb调试开启。

$ adb devices

9. 因为现在大多手机的版本是安卓9.0以上的，所以需要修改我们cordova中的配置文件
   打开AndroidMainfest.xml，配置
   android:networkSecurityConfig="@xml/network_security_config"。

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" package="com.briup.superfoods" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:hardwareAccelerated="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" 
    android:networkSecurityConfig="@xml/network_security_config" 
    android:supportsRtl="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

打开res/xml，新建network_security_config.xml配置如下信息。
<?xml version="1.0" encoding="utf-8"?> <network-security-config> <base-config cleartextTrafficPermitted="true" /> </network-security-config>

10. 然后回到控制台，接着进行第八步的操作，执行

$ cordova run android

1. app运行到手机
   

Vue、axios、vue-element-admin技术栈的打包操作

1. 更改.env.production文件
   

2. 更改vue.config.js。
   

3. main.js中注释代码
   

4. 执行npm run build.

安卓环境搭建

建议大家直接下载as（android studio）进行搭建
下载地址or下载地址
或者参考此处博主的博客博客地址