本文共 2900 字，大约阅读时间需要 9 分钟。

vue开发依赖的相关配置

今天先做客户端方面的配置，明天再做服务端的部分。

那么马上开始吧~

修改部分代码

脚手架生成的代码肯定是不适合我们所用的 所以要修改一部分代码

//App.vue
     

修改main.js

main.js 是我们应用程序的「通用 entry」。

在纯客户端应用程序中，我们将在此文件中创建根 Vue 实例，并直接挂载到 DOM。

但是，对于服务器端渲染(SSR)，责任转移到纯客户端 entry 文件。

main.js 简单地使用 export 导出一个 createApp 函数：

import Vue from 'vue';Vue.config.productionTip = false;import App from './App.vue';//router store 实例//这么做是避免状态单例export function createApp() {   const app = new Vue({    //挂载router，store    render: h => h(App)  })  //暴露app实例  return { app };}

添加Vue.config.js配置

webpack的入口文件有两个，一个是客户端使用，一个是服务端使用。

今天只做客户端部分。

src/vue.config.jsmodule.exports = {  css: {    extract: false//关闭提取css,不关闭 node渲染会报错  },  configureWebpack: () => ({    entry: './src/entry/client'  })}

根目录创建 entry 文件夹，以及webpack入口代码

mdkir entrycd entry创建 入口文件  client.js 作为客户端入口文件。  server,js 作为服务端端入口文件。 //先创建不做任何配置entry/client.js   import { createApp } from '../main.js';   const { app } = createApp();   app.$mount('#app');

路由和代码分割

添加新路由，这里将存放pages的相关路由

src/pages/router/index.js

/** * * @method componentPath 路由模块入口 * @param {string} name 要引入的文件地址 * @return {Object} */function componentPath (name = 'home'){  return {    component:() => import(`../${name}/index.vue`)  }} export default [  {    path: '/home',    ...componentPath(),    children: [      {        path: "vue",        name: "vue",        ...componentPath('home/vue')      },      {        path: "vuex",        name: "vuex",        ...componentPath('home/vuex')      },      {        path: "vueCli3",        name: "vueCli3",        ...componentPath('home/vueCli3')      },      {        path: "vueSSR",        name: "vueSSR",        ...componentPath('home/vueSSR')      }    ]   }]

src/router.config.js作为路由的总配置 易于管理

//路由总配置  import Vue from 'vue';  import VueRouter from 'vue-router';   Vue.use(VueRouter);  //为什么采用这种做法。  //如果以后有了别的大模块可以单独开个文件夹与pages平级  //再这里导入即可。这样易于管理   // pages  import pages from './pages/router';   export function createRouter() {    return new VueRouter({      mode: 'history',      routes: [        {          path: "*",          redirect: '/home/vue'        },        ...pages      ]    })  }

更新main.js

import Vue from 'vue';Vue.config.productionTip = false;import App from './App.vue';+ import { createRouter } from './router.config.js'//router store 实例//这么做是避免状态单例export function createApp() {+  const router = createRouter()  const app = new Vue({+    router,    render: h => h(App)  })  //暴露app,router实例  return { app, router };}

更新 client.js

// client.jsimport { createApp } from '../main.js'; const { app, router } = createApp(); router.onReady( () => {  app.$mount('#app');})

最后

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：.欢迎大家进群交流讨论，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。

转载地址：http://igyyn.baihongyu.com/