vueよくある質問のまとめ(一)

10372 ワード

先端成長の道 vue web

文書ディレクトリ

一、vueパッケージ後空白解決

を表示する

二、elementの小さいアイコンは

を表示しません

三、vue+elementパッケージ後のスタイルが混乱

四、urlパラメータの変更またはブラウザの更新、ページの変更の問題なし

五、url交換前進後退無効

五、ドメイン間

の解決
一、vueパッケージ後に空白解決を表示する
解決方法:configの下のindexを修正します.jsでbulidモジュールがエクスポートしたパス

module.exports = {
     
  build: {
     
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
 }

assetsPublicPathのデフォルトは'/'つまりルートディレクトリです.私たちのindexはhtmlとstaticは同じレベルのディレクトリの下にあります.だから「./」;
npm run buildの再実行
二、element小アイコンが表示されない
解決方法:biuldの下のutilsを修正する.js,ctrl+f ExtractTextPluginを検索する.extract,このコードブロックを修正する


      return ExtractTextPlugin.extract({
     
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })

三、vue+elementパッケージ後のスタイルが混乱
原因はmainです.jsのimport順序により、自分で書いたスタイルが上書きされます.


import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import Vue from 'vue'
import router from './router'

次の順序を調整すればよい
四、urlパラメータの変更またはブラウザの更新、ページの変更問題なし
解決方法:

      
watch: {
     
	'$route' (to, from) {
      //        
		if(to.params){
     //     1         
			//    
			this.getDetail();                  
			console.log(to,this.$route.query.id)
		}
	}

データの再取得の傍受またはforceUpdateメソッドの使用

      this.$forceUpdate(); //        dom

五、url交換前進後退無効
解決方法:1.ルーティングにhistoryモードを直接設定する
2.hashモード用onhashchangeイベント、


mounted () {
     
	//                 ,hash        hashchange  
	window.addEventListener('hashchange', () => {
     
		let currentPath = window.location.hash.slice(1)
		if (this.$route.path !== currentPath) {
     
			this.$router.push(currentPath)
		}
	}, false)
},

五、ドメイン間解決
configの下のindexを修正します.jsにおけるdevモジュール

const test = "http://xxx.xx.xx.xx:xxxx"; //apiurl

module.exports = {
     
  dev: {
     

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
     
       '/api': {
     
         target: test, 
         changeOrigin: true, 
         pathRewrite: {
     
           '^/api': '/api'
         }
       },
    },

このコードを追加しないでlocalhost:8080/api/loginにアクセスし、追加するとリダイレクトします.http://xxx.xx.xx.xx:xxxx/api/login,インタフェースが/loginであれば,設定でapiを外せばよい.

Laravelノート

vueテーブルのボタンによるパラメータとバックエンドによるデータインタラクションの実現