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 发现终于能看到资源了。

Done! By suki,引用请注明出处作者。
License CC BY-NC-SA 3.0.

0%