使用vue cli 3项目打包到指定目录

2019-08-22

日常打包执行npm run build会将代码打包至dist目录下，各种js引入，均已网站根目录为依据。我们想要把项目作为子目录访问时就需要做些配置了。

1 设置打包路径

vue.config.js文件中配置publicPath属性，这样在打包后dist中index.html中所有的文件引入都会加上配置的前缀。打包完成后我们将dist重命名成targetPath(设置的地址)，然后将文件夹上传到网站根目录即可。

1
2
3

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/targetPath/' : '/'
}

在路由配置文件中设置base选项，如果不设置，到时候会出现找不到模块的情况。process.env.BASE_URL是一个vue cli中内置的变量，他的值就是vue.config.js中配置的publicPath的值。如果不想用这个变量，也可以自己定义。

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  ...
})

如果项目的路由模式采用了history模式，则需要配置一下web服务器。
这里以nginx为例，上面设置的目录是targetPath我们应该做如下配置。注意一定要加上targetPath,否则会出现404错误

server{
  ...
  location /targetPath {
    try_files $uri $uri/ /targetPath/index.html;
  }
  ...
}