Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下

关于将打包后的项目文件不放在根目录下

有时候，我们总是需要这样的设置：希望将打包后的文件放在a.b.com/somepath/这样一个路径下。

然而在vue-cli创建的项目中，默认的打包路径中的静态资源的访问路径是：a.b.com/a.js，我们希望在html中的引用是a.b.com/somepath/a.js，我们可以在config/index.js中进行如下设置：

module.exports= {
  build: {
    assetsSubDirectory: '/somepath/'  // 用于设置静态资源的引用前缀，相当于设置一个base路径的作用，会将在页面中引用的静态资源，在域名和static（如果你将js、css、img等静态资源打包到这个文件夹下的话）之间，加上你设置的值
  }
}

而我们在本地开发时，如果希望本地访问的路径也加上/somepath/，就可以在config/index.js中进行与build一样的设置：

module.exports= {
  dev: {
    assetsSubDirectory: '/somepath/'  // 用于设置静态资源的引用前缀，相当于设置一个base路径的作用，会将在页面中引用的静态资源，在域名和static（如果你将js、css、img等静态资源打包到这个文件夹下的话）之间，加上你设置的值
  }
}

我的vue多页面系列的其他博客链接：

Vue-cli创建项目从单页面到多页面

Vue-cli创建项目从单页面到多页面2-history模式

Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理