【Vue-cli入门】两个或多个Vue项目如何同时放在一个站点上？如何更改npm run build的输出配置？

以下为个人理解，如理解有误敬请指出。Vue项目做完后需要通过npm run build来打包，打包后生成的index.html和static目录，因为项目中所有引入的文件的索引都是/static/…的，所以static目录只能放在站点的根目录下，那么当我一个站点想放两个甚至更多的项目时，static目录就会有重名的问题需要多个项目的static文件夹放在同一个文件夹里，对各个项目的管理更新冲.

web_star_2020

5537人浏览 · 2020-07-23 16:45:57

web_star_2020 · 2020-07-23 16:45:57 发布

在这里插入图片描述

问题：

vue-cli项目开发完成后需要通过npm run build来打包，打包后生成的index.html、static、assets等目录，因为index.html中的.js、.css和图片等引入资源文件路径都是/static/…的，而/开头的路径是绝对路径，也就是说index.html和static目录只能放在站点的根目录下，那么当我一个站点想放两个甚至更多的项目时各个项目的打包文件放在哪就成了大麻烦，总不能全放根目录吧？
我想了一下可以只要实现把项目1打包文件放在站点根目录的project_1目录中、项目2放在project_2目录中、项目3放在project_3目录中，但当访问index.html中因为index.html引入的文件路径都是/static、/assets这样的绝对路径，所以我们只要能修改index.html引入文件的路径就可以解决多个项目同时放在一个站点的问题，那么怎样配置才能修改npm run build输出的index.html文件中的引入文件路径地址呢？

解决方案：

以上遇到的问题后来经过研究和探索最终找到了解决方案，在此分享给大家
解决方法是通过vue-cli配置文件配置公共路径，如图在根目录下创建vue.config.js文件，此文件是vue-cli的配置文件，这个文件在创建脚手架时不会自动生成，所以需要手动创建，在这个文件里可以配置publicPath公共路径、devServer本地服务器配置、Webpack打包配置等等（webpack.config.js文件无法在vue-cli项目中使用，可以在此进行配置）。
而多个项目同时放在一个站点上的根本问题就在于build打包出来的所有引入文件路径默认全是/static开头，这样必须把项目放在根目录下才能访问，所以我们需要在vue.config.js中配置publicPath公共路径（如图），这样打包出来的文件引入路径都是以/xxx（xxx为自定义路径）开头的。
在这里插入图片描述

放大看一下配置之前与配置之后的index.html打包文件对比
在这里插入图片描述
这样我们就可以把打包出来的所有文件放到站点根目录下的project_2目录下啦，是不是很神奇呢

下面把vue.config.js的基础配置代码分享给大家。vue.config.js详解

module.exports = {
    publicPath: "/project_2", // 公共路径 默认为"/"，建议使用"./"相对路径
    devServer: {   // 本地服务器配置(npm run serve)
      port: 8080, // 端口
      // host: "localhost", // 域名
      https: false, // 是否开启https
      open: true,	// 是否在开启服务器后自动打开浏览器访问该服务器
      proxy: {  // 设置代理服务器（强烈建议使用，可以在本地服务器请求ajax动态数据）
        "/": {	// base-接口基础路径，通常配置/
            target: "http://localhost/", 	// 此处配置代理服务器的域名，可以直接配置线上域名
            changeOrigin: true, 
            pathRewrite: {}
        }
      }
    },
    lintOnSave: false,  // 取消lint语法检测，此处可不配置
    outputDir:"dist", // build打包输出目录
    assetsDir:"assets", // 静态文件输出目录，基于dist
    indexPath: "index.html",  // 输出html文件名
    productionSourceMap: false, // 取消.map文件的打包，加快打包速度
    configureWebpack: (config) => {
      // process.env为环境变量，分别对应.env.development文件和.env.production文件 此处表示加快开发环境打包速度
      if (process.env.NODE_ENV !== 'production') return;  
      //生产环境去掉console.log
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
      return {  // 此处配置webpack.config.js的相关配置
        plugins: [],
        performance: {}
      };
    }
};