技術標籤：vue

1、圖片引用問題
一）圖片放在src檔案的assets下
1）直接引用時使用相對路徑

<img alt="Vue logo" src="../assets/logo.png" />

2）動態引用時用require()

<img :src="imgUrl" alt="" />

data(){
    return{
      imgUrl:require("../assets/logo.png")
    }
  }

js中引用圖片要用require()方法

3）css背景圖片

.home{
  background: url(../assets/bg.jpg) no-repeat;
}

二）圖片放在src檔案的靜態資料夾public下

2、打包後不是放在伺服器根目錄下，則index.html訪問的資源都需用相對路徑。
在vue.config.js檔案配置：publicPath: './'（預設為'/'）

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

此外：所有引用public靜態資料夾下資源都要以"./"開始(預設用'/'）
如在index.html引用靜態js檔案

3、跨域處理
在vue.config.js檔案配置代理

module.exports = {
 devServer: {
    // 配置代理
    proxy: {
      "/api": {
        target: 'http://www.baidu.com', // 想要訪問介面域名
        changeOrigin: true, 
        pathRewrite: {
          "^/api": ''
        }
      }
    }
  }
}

4、引入jquery
1)安裝：npm install jquery --save
2)配置vue.config.js

module.exports = {
  chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])
  }
}

3)在需要用到的vue元件中引入：import $ from 'jquery'