解决vuecli4创建项目集成axios+scss+element plus的一些问题

以前修改和现在修改的都有，原理忘的忘、没找到的没找到。先记录，后面慢慢研究

基本都是版本问题
main.js中

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router'
import store from "./store"
import installAxios from './plugins/axios'

const app = createApp(App)
installAxios(app)
app.use(ElementPlus)
app.use(router)
app.use(store)
app.mount('#app')

ElementUI

版本： 1.0.2-beta.42
具体什么问题忘记了；main.js中这样引入就可以了

axios

版本： 0.18.0
在plugins/axios.js中，原来的写法不匹配新版vue改成下面。

"use strict"

import axios from "axios"

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || ''
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

let config = {
    // baseURL: "http://127.0.0.1:8081"
    // timeout: 60 * 1000, // Timeout
    // withCredentials: true, // Check cross-site Access-Control
};

// 创建Axios对象
const Axios = axios.create(config)

// 请求拦截器
Axios.interceptors.request.use(
    function (config) {
        // Do something before request is sent
        return config
    },
    function (error) {
        // Do something with request error
        return Promise.reject(error)
    }
);

// 响应拦截器
Axios.interceptors.response.use(
    function (response) {
        // Do something with response data
        return response
    },
    function (error) {
        // Do something with response error
        return Promise.reject(error)
    }
);

export default (app) => {
    // 挂载axios到Vue对象
    app.config.globalProperties.$http = Axios
}

scss

版本： sass-loader已经到12，11以下才可以用。
“node-sass”: “^6.0.1”,
“sass-loader”: “^10.2.0”
在style标签中lang="scss"使用，不需要配置