vue 项目引用static目录资源_Vue开发中的一些常见套路和技巧

开篇先说明下，不一定所有的知识点都是 Vue 中的，而是在Vue使用时候的一些套路，其中也包含一些 JavaScript 的小技巧奥。那么在其他的地方获取你也可以用到哦。

包管理工具

首先对于包管理工具，我现在首推 yarn 了，在使用 npm 的时候，我碰到过丢包，卡包，安装过程死板等问题，所以我毫不犹豫的使用了 yarn 代替了 npm 作为主要的包管理工具。除了上面的一些问题，yarn也给开发者主动的暴露出来了一个 yarn-erro.log 的错误堆叠文档。虽然它看起来有点鸡肋，但也说明了在某些方面还是考虑的非常周到。

package.json

大家都用过不同的脚手架，如：vue-cli create-react-app nest-cli umi-cli , taro-cli 等等开箱即用的一些定制化脚手架，我们只需要通过官方的 demo 和 快速上手 进行安装使用即可。但同样的在如此多的脚手架对 script shell 其实是不友好的，可能有些是使用 run serve 来启动项目，有些是 run start 启动，等等类似的还有很多，所以如果你使用这类脚手架，最好给自己一个统一的 script shell 。这样就不会出险混乱了。我个人使用的是运行：dev ，打包：build。(仅供参考)。

"scripts": {
        "dev": "vue-cli-service serve",    "build": "vue-cli-service build"  }

路径别名@...

在真实项目中，为了更好的逻辑分层，或者说进行 monorepo 的时候，项目大大小小的目录非常的嘈杂，这个时候就会因为引用资源进行消费，产生非常多不友好的路径引用。出险非常多的 ../ 等路径的引用，非常的糟糕，因此对某些资源的路径进行代理，就能够非常友好的对于开发者和协同人员进行阅读，而不是重复的套一些无用符号。我在项目中，代码的目录有以下几个。具体可以根据自己爱好进行一些合适的配置。

module.exports = {
      resolve: {
        alias: {
          // 设置路径代理      '@': resolve('src'),      'components': resolve('src/components'),      'api': resolve('src/api'),      'icons': resolve('src/icons'),      '#': resolve('src/assets'),      'utils': resolve('src/utils')    }  }}

全局sass文件管理

对于使用sass/scss的朋友其实都会定义一些自己个人习惯的一些global style上按涉及到开发的方方面面，例如@function，@extends ckass interface，@mixins，全局变量等等来方便自己开发的进程，但是很多小伙伴都是在每一个component都通过@import来导入，意味着，每一个需要使用它的地方都需要添加@import .../file path来进行引入，这样来说是非常麻烦的。所以我们需要做到一次引用，终身受用，在vuecli中可以非常方便的进行全局引入

css: {
      sourceMap: false,  loaderOptions: {
        scss: {
          additionalData: `                    @import "~@/assets/styles/norm.scss";                    @import "~@/assets/styles/mixins.scss";                `    },    sass: {
          additionalData: `                    @import "~@/assets/styles/norm.scss"                    @import "~@/assets/styles/mixins.scss"                `    }  }}