demo 地址: https://github.com/iotjin/JhVueOCDemo

一、进行项目配置

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

在这里插入图片描述

二、打包命令

以下两个都可

npm run build

yarn build

打包后的文件：

在这里插入图片描述

三、导入iOS项目中

在这里插入图片描述

#import "OneVC.h"
#import <WebKit/WebKit.h>

@interface OneVC ()<WKNavigationDelegate>

@property (nonatomic,strong)WKWebView *webView;

@end

@implementation OneVC

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self configWebView];
    //    [self configWebView2];
}

- (void)configWebView {
    [self.view addSubview:self.webView];
    NSString *path = @"dist/index.html";
    NSURL *url = [[NSBundle mainBundle] URLForResource:path withExtension:nil];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
}

- (void)configWebView2 {
    [self.view addSubview:self.webView];
    NSString *urlStr = @"https://www.baidu.com";
    NSURL *url = [NSURL URLWithString:urlStr];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
}

#pragma mark - WKNavigationDelegate
// WKNavigationDelegate主要处理一些跳转、加载处理操作，WKUIDelegate主要处理JS脚本，确认框，警告框等

// 页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
    NSLog(@" 页面开始加载时调用 ");
}

// 当内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
    NSLog(@" 页面开始加载时调用 ");
}

// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    NSLog(@" 页面加载完毕时调用 ");
}

// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation {
    NSLog(@" 页面加载失败时调用 ");
}

- (WKWebView *)webView {
    if (!_webView) {
        WKWebView *webView = [[WKWebView alloc]initWithFrame:self.view.frame];
        webView.navigationDelegate = self;
        _webView = webView;
    }
    return _webView;
}