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

小鱼儿 2023-06-16 13:53 5阅读 0赞

一、 打包

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',

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

![error][]

最后我发现可能是路由懒加载的问题， 参考链接（[https://hacpai.com/article/1557889050485][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 配置][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 服务 访问 页面即可

[error]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXNvdXJjZXMuZWNob2Nvdy5jbi9maWxlLzIwMTkvNS8xNS9USU0lRTUlOUIlQkUlRTclODklODcyMDE5MDUxNTEwMzIwOS5wbmc?x-oss-process=image/format,png
[https_hacpai.com_article_1557889050485]: https://hacpai.com/article/1557889050485
[issue]: https://hacpai.com/forward?goto=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin%2Fissues%2F439
[vue-cli3]: https://hacpai.com/forward?goto=https%3A%2F%2Fcli.vuejs.org%2Fzh%2Fconfig%2F%23assetsdir