nuxt.js如何实现多个项目的代码复用？

为什么多个项目代码需要复用？

总会出现一些相关联的项目，他们的代码相似，包依赖相似，很多组件，辅助代码都相同，项目本身之间就有很大的关联，比如一个是后台管理前端项目，另一个是主项目的前端系统，提交部署的时候都可以一起提交。为了让这部分公共代码更好地复用，交流一下我的做法，让多个项目共用package.json，公共代码合并到一处。那么让我们开始吧。。。

使用官方方法搭建一个nuxt ssr项目

npx create-nuxt-app example

使用上面的命令，得到的项目结构如下图。

16ed630f6c2dd6da.png

修改项目结构，将项目移到子目录下

保留原来目录下的公共配置文件，将项目文件及其配置文件打包，命名后放入src目录下。

16ed64030a42af95.png

修改配置文件nuxt.config.js

const domain = 'example.com'
export default {
  srcDir: __dirname,
  buildDir: `.nuxt/${domain}`
}

srcDir 工程的文件夹路径 buildDir 编译后工程的文件夹路径
这样项目路径就重新配置正确，同时编译生成的文件会出现在.nuxt/example.com下不会和其他项目文件冲突

修改package.json中的scripts

"scripts": {
    "example:dev": "nuxt --config-file src/example.com/nuxt.config.js",
    "example:build": "NODE_ENV=production nuxt build --config-file src/example.com/nuxt.config.js",
    "example:start": "NODE_ENV=production nuxt start --config-file src/example.com/nuxt.config.js",
}

这样就可以通过npm run example:dev运行修改目录后的项目了。

项目之间互用代码，公共代码整理

16ee997f96682388.png

我们整理项目文件目录，将公共代码放入shared中，然后使用相对路径引入shared需要使用的文件就可以了。

steamstats.cn steam游戏在线人数统计，留个外链