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目錄下，更清爽整潔