vue项目部署时的一些坑
vue版本2.9，webpack 版本4.43.0，webpack-cli版本3.3.1
1、常见的静态资源引用不到
这个常见，百度有很多
2、打的测试包，js文件在项目目录里面，但进首页的时候引用从根目录下引用，可能个别的也从项目目录下引用
加上base后，js引用正常
3、用Tomcat部署vue项目时，页面刷新会404
https://www.cnblogs.com/sxshaolong/p/10219527.html
但似乎这位作者给出的方案是跳转到首页
4、vue项目部署在nginx下时，访问时报500
查看nginx错误日志，是nginx没有权限访问 failed (13: Permission denied)
然后参考https://www.cnblogs.com/xiaohuiduan/p/9867656.html
打开nginx配置文件开头的user root
————————————————————————上面的措施可能会解决一部分问题，但可能会带来其它问题———————————————————-
下面是我使用的最终配置：
先说nginx
server { listen 8998; server_name localhost; location / { root /home/ips/vue-web/; try_files $uri $uri/ /index.html; index index.html index.htm; #autoindex on; #开启nginx目录浏览功能 autoindex_exact_size off; #文件大小从KB开始显示 charset utf-8; #显示中文 add_header \'Access-Control-Allow-Origin\' \'*\'; #允许来自所有的访问地址 add_header \'Access-Control-Allow-Credentials\' \'true\'; add_header \'Access-Control-Allow-Methods\' \'GET, PUT, POST, DELETE, OPTIONS\'; #支持请求方式 add_header \'Access-Control-Allow-Headers\' \'Content-Type,*\'; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
nginx的安装目录也在home/ips/一层，也就是和vue项目打包后放的目录vue-web同一层，注意build后的项目不可以放在vue-web的子目录，但可以修改root路径到想要的目录下。root路径意味着localhost:8998就映射到root路径中去。vue.config.js中publicPath用的”/”,而不是”./”，所以项目中加载js才能映射到root路径中找的到。另外可以避免router.js中hash模式可以刷新，但URL中带有#，history模式不带#号，但不能刷新的问题。（打的测试包，js和js.map文件都直接在vue-web目录）
module.exports = { publicPath: \'/\', outputDir: \'dist\', assetsDir: \'static\', lintOnSave: process.env.NODE_ENV === \'development\', productionSourceMap: false, devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, proxy: { \'/api\': { target: process.env.VUE_APP_BASE_API, changeOrigin: true, pathRewrite: { \'^/api\': \'api\' } }, \'/auth\': { target: process.env.VUE_APP_BASE_API, changeOrigin: true, pathRewrite: { \'^/auth\': \'auth\' } } } }
最后加上router.js的部分代码
export default new Router({ base: \'vue-web/\', mode: \'history\', scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap })
浏览器访问首页的时候直接http://**.**.**.**:8998/vue-web即可访问index页面，且其中跳转的url中不带#，还可以刷新。项目目录可以不直接放在nginx目录下，更清爽整洁