vue打包记录(包括子目录下部署)

vue项目是通过vue-cil生成,打包后通过nginx启动:

#nginx
location / {
	root   /xxxx/dist;
	index  index.html;
	try_files $uri $uri/ /index.html = 404;
}

启动后即可访问.

后来因为后端需要，因为将vue配置成子目录部署访问 由于出现的问题很多 因此记录一下

1.修改路由文件，增加对base的添加

new Router({
  mode: 'history',
  base: '/site',
  routes: [{ path: '/', redirect: '/home' },
          { path: '/home', component: Index },
		  ...dosoming
  ]
})

此处在路由处理新增子目录路由.

2.修改nginx

location /site {
	root   /xxxx/dist;
	index  index.html;
	try_files $uri $uri/ /index.html = 404;
}

3.修改项目中config文件夹下index.js文件

// 修改  assetsPublicPath: '/' 为
assetsPublicPath: '/pemweb/'

按照网上的一些文章我修改了assetsPublicPath，但是打包后的js文件报错 进过查看返回的文件内容发现，js文件返回数据是index.html的数据，并非预期的js文件数据 经过排除与测试

// 修改 assetsRoot: path.resolve(__dirname, '../dist/'),
assetsRoot: path.resolve(__dirname, '../dist/pemweb/')

再次启动nginx 发现终于能看到资源了。