라라벨의 예.vue가 업데이트되지 않음
라라벨 5 프로젝트에서 Vue를 사용하는 방법을 찾고 있습니다.기본 Laravel 설치는 app.js 및 Example.vue와 함께 제공됩니다.home.blade.php에 추가하여 뷰에 "I am a example component!"라고 표시할 수 있었습니다.저를 혼란스럽게 하는 것은 무엇보다도 이 컴포넌트를 전혀 변경할 수 없다는 것입니다.
Example.vue에서 텍스트를 변경해도(논리가 아닌 템플릿 부분만) 전혀 업데이트되지 않습니다.(Laravel docs 등에 따라 npm run dev를 실행하려고 하면 오류 없이 컴파일 되는 것 같고 /public/js/app.js는 변경되지만 브라우저 표시는 변경되지 않습니다.)
app.blade를 수정할 때.php 이러한 변경은 home.blade.dlash의 변경사항과 같이 표시됩니다.그러나 /resources/assets/js/app.js 또는 Example의 내용을 변경했다는 증거를 찾을 수 없습니다.vue는 영향을 미칩니다.app.blade에서 id="app"을 제거하면 더 혼란스럽습니다.php div 요소. 이렇게 해도 Example 컴포넌트는 사라지지 않습니다.vue jsfiddle을 사용한 조작을 보면 컴포넌트가 파손될 것으로 생각됩니다.
캐싱 문제인지 컴파일 문제인지, vue 작동 방식인지 잘 모르겠지만 뭐가 잘못되었는지 알 수 없습니다.저는 webpack.mix.js 파일을 larvel 설치에서 바로 사용하고 있으며 vagrant를 중지하고 재시작하여 브라우저를 새로고침하고 php artisian cache:clear를 시도했습니다.(이전에는 Mix가 아닌 Elixir를 사용하여 vueify와 guffe, 같은 문제를 발생시켰습니다.)
어떤 제안이라도 해주시면 감사하겠습니다!
브라우저(F12)에서 콘솔을 열고 네트워크에 접속하여 비활성화 캐시를 체크 및 끄고 페이지를 새로고침하려고 했습니까?브라우저가 이전 스토리지 파일을 사용하는 경우.
이 방법은 효과가 있었습니다.
특정 환경에서는 파일이 변경될 때 웹 팩이 업데이트되지 않을 수 있습니다.시스템에 이 문제가 있는 경우 watch-poll 명령어의 사용을 검토해 주십시오.
npm run watch-poll
나도 똑같은 문제가 있었어.로컬 개발 환경(Mac OS X Sierra, php7, mysql)을 사용하고 있습니다.위와 같이 캐시 클리닝을 시도했습니다.php 서버를 정지 및 재기동했습니다(만일을 위해).( ): 운이 없다.그 후 '컴포저 덤프 자동 로드' 문제가 발생.그리고 'npm run watch'는 다음과 같은 메시지를 전달했습니다.
> @ watch /Users/ulam/code/myproj
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
10% building modules 1/1 modules 0 active Webpack is watching the files…
95% emitting
DONE Compiled successfully in 4171ms
그 후:
nks Chunk Names
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1 20.1 kB [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb 18 kB [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158 23.4 kB [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512 45.4 kB [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760 109 kB [emitted]
/js/app.js 1.2 MB 0 [emitted] [big] /js/app
/css/app.css 147 kB 0 [emitted] /js/app
WAIT Compiling... 19:48:26
95% emitting
DONE Compiled successfully in 86ms 19:48:26
Asset Size Chunks Chunk Names
/js/app.js 1.2 MB 0 [emitted] [big] /js/app
/css/app.css 147 kB 0 [emitted] /js/app
WAIT Compiling... 19:49:37
95% emitting
DONE Compiled successfully in 121ms 19:49:38
Asset Size Chunks Chunk Names
/js/app.js 1.2 MB 0 [emitted] [big] /js/app
/css/app.css 147 kB 0 [emitted] /js/app
그 후 모든 것이 성공했습니다.(라벨 5.5.3)
저도 똑같은 문제가 있어요.캐시를 비활성화하고 캐시 및 보기를 삭제해도 도움이 되지 않습니다.저는 Larabel 5.4를 사용하여 공유 호스팅 사이트를 개발하고 있습니다.
이 비디오 https://www.youtube.com/watch?v=pTVCW5k4piU 의 코멘트에서는, npm 인스톨과 npm 의 watch 를 실행할 것을 제안하고 있습니다.https://ferugi.com/blog/nodejs-on-godaddy-shared-cpanel/ 페이지의 지시에 따라 npm 설치를 실행할 수 있었지만 npm run watch에서 오류가 발생했습니다.
Vue 컴포넌트는 제가 원하는 최고의 솔루션이 될 것 같습니다만, 이 컴포넌트를 사용할 수 없다면 AJAX를 사용해야 합니다.
Vue.로 Vue.js 프로젝트를 합니다.npm run serve
watchchernpm을 에 실행합니다.Vue.js 프로s 。는 음음음음음음음을 통해서 서비스를 하고 있기 php artisian serve
, 「동행」도 실행할 가 있습니다.npm run watch
php artisan serve
라라벨의 변화만 지켜봐
방법이 실행 입니다.php artisan serve
★★★★★★★★★★★★★★★★★」npm run watch
개발 프로젝트를 변경할 때 함께 사용할 수 있습니다.
★★★★★★npm install npm-watch
저도 같은 문제가 있었습니다.XAMP를 사용하고 있었는데, 대신 'php 장인 서브'를 사용해 보았습니다.
라라벨과 vuejs를 다룰 때도 비슷한 문제에 직면했습니다.
스텝 1. 확인npm run watch
★★★★★★★★★★★★★★★★★」npm run watch-poll
이치노
스텝 2. app.js 파일이 크면 브라우저가 캐싱할 가능성이 높습니다.Ctrl+F5 및 Ctrl+Shift+F5(Chrome 켜기)를 사용하여 브라우저 캐시를 지웁니다.
스텝 3. 이 방법은 캐시 버스트에 적합합니다.더하다.version()
webpack.config.js
.
ㅇㅇ.mix.js('resources/js/app.js','public/js').vue().sass('resources/sass/app.scss', 'public/css').version();
<script src="{{ mix('js/app.js') }}" defer type="text/javascript"></script>
.
이것에 의해, 모든 캐시의 문제가 해소됩니다. : )
언급URL : https://stackoverflow.com/questions/42241106/laravel-example-vue-not-updating
'programing' 카테고리의 다른 글
정적 초기화 코드 블록과 비정적 초기화 코드 블록의 차이점은 무엇입니까? (0) | 2022.07.02 |
---|---|
Vuejs(vuex) 오류 알 수 없는 로컬 변환 유형 (0) | 2022.07.02 |
vue cli 빌드 후 운영 사이트 실행 방법 (0) | 2022.07.02 |
Vue.js - 데이터 요청이 완료될 때까지 페이지 렌더링을 연기합니다. (0) | 2022.07.02 |
컴파일 시 sizeof() 결과를 C로 출력하려면 어떻게 해야 하나요? (0) | 2022.07.02 |