踩坑日常

vue-cli3以后,关于webpack打包等的相关配置


最近刚入职一家新的公司,接手了一个新的项目!做一个人脸系统相关的后台管理系统!领导让我选择自己拿手的技术框架,我毫不犹豫的选择了 vue-cli3 + webpack,然后集成了 element-ui作为第三方插件库!

在刚开始开发阶段,一切都很顺利!项目也写的飞快,因为之前有用过element-ui这个第三方插件!但是,当我进行到项目打包发布时,终于碰到了问题!

因为之前一直都是使用vue-cli@3以下的版本+webpack进行开发,虽然也配置过很多次打包文件,但是这个因为开发过程顺利,没认真看配置文件!当真的打包的时候,才想起来要配置一些文件时,懵逼了!!what???build文件夹呢?我的webpack.config.js文件呢?

带着一连串疑问,开始了翻看vue-cli文档的过程!终于,看到了关键性问题!在vue-cli3之后,为了让程序员可以把重心更多的放在开发中,而不是配置文件中,vue-cli3之后的版本,跟react一样,把配置文件默认给隐藏了!!这可急坏了我这个小菜鸟,怎么办???继续翻看文档,经过九九八十一难,总算摸索出来了!所以,再次记录下这次的爬坑过程,给自己长点记性!

在vue-cli3之后,如果想要进行打包相关的配置时,需要自己在根目录下创建一个文件夹vue.config.js,而所有相关的打包配置均在这里面执行!

// vue.config.js
module.exports = {
}

调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack选项提供一个对象:

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

在这里只记录下我需要的一些配置,其他的如果想要了解,可以去vue-cli官方文档查看,比较详细!

我在项目打包时,因为一些众所周知的原因,需要重新配置下js/css/img等相关的根路径,而vue-cli3默认的为/,现在需要改成./,否则会造成访问不到路径的情况,配置如下:

// vue.config.js
module.exports = {
	publicPath: './',
}

就是这么简单,只需要把publicPath重新声明为./即可!

此外,为了降低打包之后项目的体积,同样会进行一些插件的优化,比如把vue/axios/element-ui从CDN资源库引进!相关的配置如下:

  1. 在vue.config.js中,引入webpack相关配置,使用externals把打包时需要排除的依赖包等排除在外
// vue.config.js
module.exports = {
 configureWebpack: {
   externals: {
  		 'vue': 'Vue',
      	 'axios': 'axios',
      	 'nprogress': 'NProgress'
   }
 }
}

注意: element-ui如果需要从CDN引入,并不需要声明在externals中,只需要把引入部分注释,然后在index.html中引入外部资源包即可!这点跟网上很多的大神们解答的有出入!

  1. 在main.js配置文件中,注释掉相应的引入
// main.js
// import './plugins/element.js'
// import 'nprogress/nprogress.css'
  1. 在public文件夹下的index.html文件中,引入相应要从CDN资源库引入的文件(此处因对应自己项目所使用的相关库版本)
// public/index.html
<head>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css">
</head>
<body>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

至此,打包相关的基本配置就算完成了!项目体积缩减的非常明显!小白一个,记录下自己的开发日常,也希望能给碰到同样问题的朋友们,一点点方向!其实主要问题,还是自己不熟vue-cli3!也奉劝各位同行们,在没有完整阅读过新技术的开发文档时,慎用相关技术哦!大神忽略哈 ~~~

你可能感兴趣的:(踩坑之路)