vue.config.js配置

1.配置全局scss

//2种方式,配置css或者chainWebpack
module.exports={
    css: {
        loaderOptions: {
            sass: {
                prependData: `
                @import "@/assets/css/const.scss";
                `
            }
        }
    },
        // chainWebpack: config => {
    //     const oneOfsMap = config.module.rule('scss').oneOfs.store
    //     oneOfsMap.forEach(item => {
    //         item
    //             .use('sass-resources-loader')
    //             .loader('sass-resources-loader')
    //             .options({
    //                 // 引入一个全局sass文件
    //                 resources: './src/assets/css/const.scss',

    //                 // 引入多个全局sass文件
    //                 //resources: ['./src/assets/styles/vars.scss', './src/assets/styles/mixins.scss', './src/assets/styles/functions.scss']
    //             })
    //             .end()
    //     })
    // },
}

2.引入vant 

npm i vant@next -S

npm i babel-plugin-import -D

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

import { Button } from 'vant';

createApp(App).use(store).use(router).use(Button).mount('#app')

3.跨域配置

//配置原理:将axios的baseUrl设置成/api,这样子浏览器端用的是http://localhost/api请求远程服务器，因此浏览器端会认为是同源,不会出现跨域报错，然后请求时将服务器地址代替/api,于是最终请求的还是服务器地址

devServer: {
        proxy: {
          '/api': {
            target: `http://v.juhe.cn/toutiao/index`,
            changeOrigin: true,
            pathRewrite: {
              '^/api' : ''
            }
          }
        }
    }

//请求方法
export function getGoodsData(type,page){
    return request2({
        url : '',
        params : {
            type,page,key
        }
    })
}

//相关配置
export function request2(config){
    const instance=axios.create({
        baseURL : '/api',
        timeout : 5000
    })

    return instanceConfig(instance,config)
}

function instanceConfig(instance,config){
    instance.interceptors.request.use(config=>{
        //show loading
        return config
    },err=>{
        console.log(err);
    })

    instance.interceptors.response.use(res=>{
        //close loading
        return res.data.data
    },err=>{
        console.log(err);
        return err
    })

    return instance(config)
}