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目录下，更清爽整洁