vue-cli5多入口项目分项目编译打包并部署nginx

项目准备

假设有两个项目A和B，我们希望访问localhost:9000/projectA来访问项目A，访问localhost:9000/projectB来访问项目B.

项目结构

项目配置

vue.config.js

var projectname = process.argv[3]
function getEntry() {
  var entries = {}
  if (process.env.NODE_ENV == 'production') {
    entries = {
      index: {
        // page的入口
        entry: projectname == 'projectA'?'src/views/projectA/main.js' : 'src/views/projectB/main.js',
        // 模板来源
        template: 'public/index.html',
        // 在 dist/index.html 的输出
        filename: 'index.html',
        title: projectname,
        chunks: ['chunk-vendors', 'chunk-common', 'index']
      }
    }
  } else {
    entries = {
      projectA: {
        entry: 'src/views/projectA/main.js',
        template: 'public/index.html',
        filename: 'projectA.html',
        title: 'projectA',
        chunks: ['chunk-vendors', 'chunk-common', 'projectA']
      },
      projectB: {
        entry: src/views/projectB/main.js',
        template: 'public/index.html',
        filename: 'projectB.html',
        title: 'projectB',
        chunks: ['chunk-vendors', 'chunk-common', 'projectB']
      }
    }
  }
  return entries
}
var pages = getEntry()
module.exports = defineConfig({
  pages: pages,
  outputDir: 'dist' + projectname, 
  publicPath: projectname == 'projectA'?'/projectA/':'/projectB/',
  transpileDependencies: true,
  lintOnSave: false ,//如果为false，就是取消eslint规则的检查  解决低node版本报错问题 
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
  },
})

package.json

"build projectA": "vue-cli-service build",
"build projectB": "vue-cli-service build",

项目本地运行

npm run serve

项目本地运行访问

• localhost:9000/projectA
• localhost:9000/projectB

项目分开打包

//打包命令
npm run build projectA
npm run build projectB
//打包结果(与public同级):distprojectA  distprojectB

项目部署（nginx）

• nginx安装目录下新建文件夹muldist用来存放前端文件；
• 把打包结果distprojectA 和 distprojectB复制到文件夹muldist下；
• 打开配置文件nginx.conf,部署多项目（可看添加链接描述这篇文章，修改配置如下：

server {
       listen       9000;
       server_name  localhost;

       location /projectA{
           alias   muldist/distprojectA /;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
       }
       location /projectB{
           alias   muldist/distprojectB/;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
       }
       location / {
           root   muldist/distprojectA ;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
       }
    }

• nginx运行（可看添加链接描述这篇文章）;
• 项目访问；