2017-06-11 22 views
0

我目前正在開發一個使用Laravel 5.4和Vue.js的網站。幾個小時前我編輯了我的Example.vue文件,並使用Filezilla將其上傳到我的服務器,並且一切正常。但不是我編輯過這個文件,並且試圖再次將它上傳到服務器,Web服務器將.vue文件顯示爲舊文件,而不是新文件。Laravel Vue.js不會更新文件到服務器

我已經嘗試清除計算機緩存和服務器/ laravel緩存,但沒有任何反應..我運行npm run devnpm run watch,我沒有得到任何錯誤。

當我檢查我的網站上的元素時,我收到一個錯誤消息:TypeError: Cannot read property 'get' of undefined,但這已通過添加行Vue.use(require('vue-resource '));,但我仍然得到相同的錯誤,和我更新之前所做的一樣。

我第一次更新文件時,我只希望它顯示一個Hello World文本,並且在更新當我已經實現了vue和div元素的加載函數時,它仍然顯示出Hello World消息...

這是我的Example.vue文件:

<template> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <p class="text-center" v-if="loading"> 
 
       Loading... 
 
      </p> 
 
     </div> 
 
    </div> 
 
</template> 
 

 
<script> 
 
    export default { 
 
     mounted() { 
 
      this.$http.get('/status/' + this.user_id) 
 
      .then((resp) => { 
 
       console.log(resp) 
 
       this.status = resp.body.status 
 
       this.loading = false 
 
      }) 
 
     }, 
 
     props: ['user_id'], 
 
     data() { 
 
      return { 
 
       status: '', 
 
       loading: true 
 
      } 
 
     } 
 
    } 
 
</script>

有誰知道我可以嘗試做?當它只是不會更新的.vue文件時,真的很讓人沮喪。所有其他文件都可以正常工作!

+0

你有沒有清除瀏覽器緩存? – wmorrell

+0

是的,所有的緩存已被清除,我得到它與下面的答案工作! –

+0

請標記來自Alex Mac的回答,因爲它解決了您的問題:) – wmorrell

回答

1

你應該在你的webpack.mix.js文件中使用laravel mix。你可以通過將mix添加到你的package.json文件來安裝mix。然後通過運行npm install --no-bin-links在Mac和Windows上運行npm install。然後通過運行npm run dev laravel mix將編譯並更新所有資源資產到公用文件夾。在這裏看到https://laravel.com/docs/5.4/mix。 這將更新您的資源/ assets/js/components文件夾中所有應該包含所有vue組件的vue組件。應該是這樣的。如果事情沒有更新,您可能需要運行npm run watch或npm run watch-poll來捕獲更新,因爲它會檢查更改。

礦看起來像這樣:

webpack.mix.js:

const { mix } = require('laravel-mix'); 

/* 
|-------------------------------------------------------------------------- 
| Mix Asset Management 
|-------------------------------------------------------------------------- 
| 
| Mix provides a clean, fluent API for defining some Webpack build steps 
| for your Laravel application. By default, we are compiling the Sass 
| file for the application as well as bundling up all the JS files. 
| 
*/ 

mix.js('resources/assets/js/app.js', 'public/assets/js'); 

mix.scripts([ 
    'resources/assets/js/enum_gender_select.js', 
    'resources/assets/js/enum_title_select.js' 
], 'public/assets/js/enum_select.js'); 


mix.sass('resources/assets/sass/app.scss', '../resources/assets/css/sass.css'); 

mix.styles([ 
    'resources/assets/css/app.css', 
    'resources/assets/css/sass.css' 
], 'public/assets/css/all.css'); 

家園的package.json文件:

{ 
    "private": true, 
    "scripts": { 
    "dev": "npm run development", 
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
    "watch-poll": "npm run watch -- --watch-poll", 
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", 
    "prod": "npm run production", 
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 
    }, 
    "devDependencies": { 
    "axios": "^0.15.3", 
    "bootstrap-sass": "^3.3.7", 
    "cross-env": "^3.2.3", 
    "jquery": "^3.1.1", 
    "laravel-mix": "0.*", 
    "lodash": "^4.17.4", 
    "vue": "^2.1.10" 
    } 
} 
+0

通知「laravel-mix」:「0. *」,在devDependencies –

相關問題