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

问题：

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: {}
};
}
};

在vue-cli项目根目录下新建文件vue.config.js，然后在文件中把上述代码复制进去就可以用啦~（别忘了修改一下publicPath哦，建议配置./）

后期我会把代理服务器（解决本地服务器请求ajax数据问题）及环境变量配置（大家经常看见的process.env.xxx变量）相关技术分享给大家，希望可以帮助到更多的前端朋友。

发布时间：2020年7月23日
作者：web_star

相关文章推荐：

vue.config.js详解