vue-cli4.x使用过程中注意事项

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;
  //或者background: url(~@/assets/bg.jpg) no-repeat;
  //~@的意思： @是webpack设置的路径名，代表的是src目录
}

二）图片放在src文件的静态文件夹public下，如：

1）引入图片

 <img :src="publicPath + 'img/logo1.png'" alt="" />

data(){
   return{
     publicPath: process.env.BASE_URL
     //process.env.BASE_URL可通过vue.config.js 中的publicPath配置
   }
}

2）css背景图片

background: url(/img/bg.jpg) no-repeat;

注意：背景图片这是绝对路径引用，如果应用没有部署在域名的根部，那么这里就会找不到路径，所以不建议用这种方法。

2、index.html引入静态资源文件

静态资源文件位置

index.html引入

<script src="<%= BASE_URL %>js/say.js"></script>
<link rel="stylesheet" href="<%= BASE_URL %>css/index.css">

<%= BASE_URL %>可通过vue.config.js 中的publicPath配置

3、跨域处理
在vue.config.js文件配置代理

module.exports = {
 devServer: {
    // 配置代理
    proxy: {
      "/api": {
        target: 'http://www.baidu.com', // 想要访问接口域名
        changeOrigin: true, 
        pathRewrite: {
          "^/api": ''
        }
      }
    }
  }
}