[JavaScript知识库]Vue中各配置文件介绍（jsconfig.json，vue.config.js等）

一；main.js 入口文件

入口文件用来注册Vue实例，路由，Vuex，全局事件总线和注册全局自定义组件

参考代码如下：

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from '@/router'
// 引入全局组件--三级联动组件
import TypeNav from '@/components/TypeNav'
import Carousel from '@/components/Carousel'
// 引入Vuex
import store from './store'

// 引入mockServe.js--mock数据
import '@/mock/mockServe'

// 引入swiper样式
import 'swiper/css/swiper.css'

Vue.config.productionTip = false

// 引入全局组件
// 第一个参数 全局组件的名字(字符串类型)，第二个参数：哪一个组件（引入的组件名）
Vue.component('TypeNav',TypeNav)
Vue.component('Carousel',Carousel)



new Vue({
  render: h => h(App),
  // 注册路由--此时组件身上拥有$router和$route属性
  router,
  // 注册仓库-- 此时组件身上拥有$store属性
  store,
  // 全局事件总线配置
  beforeCreate() {
    Vue.prototype.$bus = this;
  },
}).$mount('#app')

二；jsconfig.json文件

主要用来配置一个默认根路径，以后可以通过该根路径快速访问到子路径

?以后 @ 就代表src根路径了

{
    "compilerOptions" : {
        "baseUrl": "./",
            "paths": {
            "@/*": ["src/*"]    
        }
    },
    "exclude":[
        "node_modules",
        "dist"
    ]
}

三；vue.config.js文件

关闭selint校验，配置代理

module.exports = {
    // 关闭eslint
    lintOnSave:false,
    // 代理跨域
    devServer: {
        proxy: {
            // 如果请求前缀是 /api 就触发代理进行工作
          '/api': {
            target: 'http://39.98.123.211',
            // pathRewrite: { '^/api': '' },
          },
        },
      },
}