VueJS SPA for WP 관리 메뉴 페이지가 작동하지 않음
VueJS 프로젝트는 vue-cli에서 Webpack 템플릿을 사용하여 생성되었습니다.생산용 건물을 지을 때, 나는 하나를 얻습니다.static2개의 폴더와 1개의 폴더가 있는 폴더index.html파일 2개의 폴더는css그리고.jscss 파일은 1개뿐입니다.그러나 javascript 파일은 3개입니다.안app.xxxxxxx.js,manifest.xxxxxxxx.js,그리고.vendor.xxxxxxx.js.
실가동 VueJS 프로젝트를 노드 서버와 Apache 서버로 정리했습니다.노드 서버에는 Express를 사용했습니다.JS:
...
app.use('/public', express.static(__dirname + '/public'));
app.use('/static', express.static(__dirname + '/public/static'));
app.use('/js', express.static(__dirname + '/public/static/js'));
app.use('/css', express.static(__dirname + '/public/static/css'));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/public/index.html'));
});
...
SPA는 노드용으로 동작합니다.
Apache 서버의 경우 생성된 HTML 마크업을 모두 전송했습니다.index.html에 대해서index.phpCSS 및 JS 디렉토리가 읽혀지는 것을 확인합니다.
워드프레스도 똑같이 하려고 해요하지만 운이 없다.
내가 지금까지 WP로 한 것은 모든 JS와 CSS 파일을 로딩한 것이다.wp_enqueue_script()그리고.wp_enqueue_style(),각각 다음과 같다.그러나 html 마크업이 CSS 및 JS 파일과 연동되어 동작할 수 없습니다.어쩌면 이게 문제일지도 몰라.내가 뭘 놓쳤지?
이게 뭐냐면index.html실제 가동 상태에서 생성된 후 다음과 같이 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>wan_admin3</title>
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
<link href=/static/css/app.49437cdf2228a91c12a30d39ae35bb58.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=/static/js/manifest.989a96caedc89ff03309.js</script>
<script type=text/javascript src=/static/js/vendor.86018170deacaae1d066.js</script>
<script type=text/javascript src=/static/js/app.6103fd8f82bcb5c38544.js</script>
</body>
</html>
WP에서 한 일functions.php
add_action( 'admin_menu', 'register_my_menu_item' );
function register_my_menu_item() {
$my_plugins_page = add_menu_page(
'General Page',
'General Page',
'manage_options',
'mt-top-level-handle',
'my_plugins_page_callback'
);
$subadmin_page = add_submenu_page(
'mt-top-level-handle',
'submenu-admin',
'Sub Level Menu',
'manage_options',
'submenu_admin_page',
'admin_sub_page_callback'
);
add_action( 'load-' . $subadmin_page, 'do_enqueue' );
}
function do_enqueue() {
wp_enqueue_style(
'subadmin_css_sheet',
get_theme_file_uri( 'some-admin/subadmin/css/app.49437cdf2228a91c12a30d39ae35bb58.css'),
array(),
'1.0.0'
);
wp_enqueue_script(
'subadmin_app_script',
get_theme_file_uri('some-admin/subadmin/js/app.6103fd8f82bcb5c38544.js'),
array(),
'1.0.0',
true
);
wp_enqueue_script(
'subadmin_manifest_script',
get_theme_file_uri( 'some-admin/subadmin/js/manifest.989a96caedc89ff03309.js'),
array(),
'1.0.0',
true
);
wp_enqueue_script(
'subadmin_vendor_script',
get_theme_file_uri( 'some-admin/subadmin/js/vendor.86018170deacaae1d066.js'),
array(),
'1.0.0',
true
);
}
function my_plugins_page_callback() {
?>
<div>Hello</div>
<?php
}
function admin_sub_page_callback() {
?>
<div id="app">Subadmin</div>
<?php
}
최상위 메뉴 항목과 하위 메뉴는 어떻게 해야 하는지 보여줍니다.그러나 [Sub Level Menu]를 클릭하면 Subadmin 텍스트만 표시되고 다른 환경에서 동작하는 VueJS SPA는 표시되지 않습니다.
확실히 JS와 CSS 파일은 로딩되고 있습니다.웹페이지를 우클릭하여 소스 코드를 확인한 후 JS와 CSS 파일에 대한 링크를 클릭하면 코드가 표시되기 때문입니다.
내부 CSS 및 JS 파일 구조twentyseventeen:
내부 HTML 엔드의 경우admin_sub_page_callback(), 나는 방금 가져갔다.<div id="app"></div>원문에서index.htmlVueJS 프로젝트에서 생성된 것입니다.
비슷한 Vue.js 위젯을 WP와 함께 사용할 수 있지만 webpack 대신 browserify만 사용합니다.
vue-cli의 browserify 템플릿을 사용하지 않았지만 vue-cli와 함께 사용할 수 있습니다.대신 나는 내 package.json을 사용했다.요점은 다음과 같습니다.https://gist.github.com/maurop123/eb0c8e884fefe3e40c110b33beff48db
그러면 하나의 파일이 생성됩니다.dist/bundle.js전체 vue 앱에서 사용할 수 있습니다.그런 다음 내 wp 테마의 정적 js 파일이 있는 곳에 그 파일을 넣었습니다.
다음으로, 저는 'Radio'를 추가했습니다.wp_enqueue_script줄을 서다functions.php이렇게...
wp_enqueue_script( MD_THEME_NAME.'-bundle', MD_THEME_URI.'/assets/js/bundle.js', array('jquery'), NULL, true );
논쟁의 특정 패턴은 주제에 따라 다를 수 있습니다.넌 네가 원하는 걸 만들도록 노력해야 해.wp_enqueue_script기존 제품처럼 보입니다.
요소)를 했습니다.<div id="vueApp"></div>예를 들어, 현재 렌더링된 템플릿의 모든 위치를 지정합니다.
도움이 됐으면 좋겠네요!
언급URL : https://stackoverflow.com/questions/44980686/vuejs-spa-for-wp-admin-menu-page-not-working
'programing' 카테고리의 다른 글
| WooCommerce:"Product Add-ons" 확장에서 필드를 표시하는 방법 (0) | 2023.03.28 |
|---|---|
| WordPress에서 사용자 비밀번호 정보를 삭제하는 방법 (0) | 2023.03.28 |
| 때때로 크롬으로 장기간 정지된 요청 (0) | 2023.03.28 |
| "Bean Validation API가 클래스 경로에 있지만 구현을 찾을 수 없습니다"로 인해 부팅이 차단됩니다. (0) | 2023.03.28 |
| JSON - JSONArray를 통해 반복합니다. (0) | 2023.03.23 |