vue-cli（3.0） 打包 配置服务端 （nginx）

 

一、 打包

  vue.config.js

module.exports = {

  publicPath: '/cli3/', // 打包 线上路径

  css: {

    loaderOptions: {

      postcss: {

        plugins: [

          require('postcss-px2rem')({

            remUnit: 75

          })

        ]

      }

    }

  },

  devServer: {

    disableHostCheck: true,

    proxy: {

      '/XZAPI': {

        // target: 'http://192.168.1.155:8087', //接口域名

        // target: 'http://www.wodexuanze.cn/xuanze-api',

        target: 'http://fyts.bathj.com/xuanze-api',

        // target: 'http://192.168.1.147:8082', //接口域名

        changeOrigin: true, //是否跨域

        pathRewrite: {

          '^/XZAPI': '' //需要rewrite的

        }

      }

    }

  }

}

二、 静态资源 修改

   // 判断是生成环境 还是 开发坏境

if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }

// 静态 图片 地址 修改

  error: process.env.NODE_ENV === 'production'?'/cli3/static/morentu.png':'../static/morentu.png',

  //图片加载中显示的图片

  loading:  process.env.NODE_ENV === 'production'?'/cli3/static/loading.gif':'../static/loading.gif',

三、// 解决  打包线上 路由 无法点击 问题 如下报错------------------------------------------------------------------------------------------------------------

最后我发现可能是路由懒加载的问题， 参考链接（https://hacpai.com/article/1557889050485）

方式一：放弃懒加载

因为使用的 import 懒加载的方式，尝试改为直接加载是没有问题的。

import TheAuth from '_views/the-auth'
import TheLogin from '_components/the-login'
import TheRegister from '_components/the-register'

export default {
  path: '/auth',
  name: 'auth',
  component: TheAuth,
  redirect: '/login',
  children: [
    {
      name: 'login',
      path: 'login',
      component: TheLogin,
      meta: {
        title: '欢迎登录'
      }
    },
    {
      name: 'register',
      path: 'register',
      component: TheRegister,
      meta: {
        title: '欢迎注册'
      }
    }
  ]
}

方法二：继续使用懒加载

那如果我要继续使用懒加载呢？因为这个 issue ，我发现可能是由于访问不到 js 的问题，因为我查看他的网路请求并没有发出请求 js 的请求。

所以应该是静态资源的问题，对于 vue-cli2 生成的项目来说，可以尝试修改 assetsPublicPath 为 / 或 ./，只要修改 config.index.js 的 build 即可：

assetsPublicPath: '/'

assetsPublicPath: '/'

但是对于 vue-cli3 生成的项目怎么办呢？参考 vue-cli3 配置 assetsdir，修改为 / 或者 ./ 或者 .，只要修改 vue.config.js 即可：

module.exports = {
  assetsDir: '.',
  //...
}
 

-------------------------------------------------------------------------------------------------------------------

四、 服务端 nginx 配置

location /cli3 {
            alias D:/nginx/nginx/html/cli3/;
            try_files $uri $uri/ /cli3/index.html;
            index  index.html index.htm;
        }

开启nginx 服务 访问 页面即可