文章目录
一、vue.config.js文件配置
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/styles/index.scss";`
}
}
},
outputDir: process.env.outputDir,
devServer: {
/* 自动打开浏览器 */
open: true,
/* 设置为0.0.0.0则所有的地址均能访问 */
clientLogLevel: 'warning',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
/* 使用代理 */
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: process.env.VUE_APP_URL_API,
changeOrigin: true, //开启代理
ws: false,
pathRewrite: {
[process.env.VUE_APP_BASE_API]: ''
}
}
}
},
configureWebpack: {
plugins: [
// new BundleAnalyzerPlugin()
]
}
};
二、vue3封装全局组件使用
1.创建全局组件文件(HelloWorld.vue文件)
2.untils文件夹下创建use-components.js文件
文件代码如下(示例):
import HelloWorld from '../components/HelloWorld.vue'
export const useComponents = (app) => {
app.component('HelloWorld', HelloWorld);
};
3.main.js文件导入文件
文件代码如下(示例):
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import "./styles/index.scss"
import {
useComponents } from "@/untils/use-components";
const app = createApp(App)
useComponents(app)
app.use(store).use(router).mount('#app')
/*
* 配置完成后根据定义的名字直接在组件内可以使用:
* <HelloWorld></HelloWorld>
*/
三、vue3对axios的二次封装/请求的全局注册
1.安装axios: npm i axios --save
2.untils文件夹下创建request.js文件
文件代码如下(示例):
import axios from 'axios'
const service = axios.create({