记录vue项目上线遇到的一些问题

时间：2021-02-08 15:26:58

　　1. 静态资源路径不对，在开发模式下正常，打包到服务器上的时候，发现静态资源全部请求不到

　　原因：开发模式下，本地静态服务器直接从项目目录直接起的，跟static是同目录，写绝对路径没问题，直接localhost:8080/static/***什么的都没问题，npm run build出来的问题件是index.html和static同级，但是你部署服务器的时候，很有可能不是在服务器的根目录，这个时候只能用相对位置

　　解决：修改config/index.js文件assetsPublicPath字段

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './'
}

　　2.css中大图片路径不对，开发模式下正常

　　原因：打包后css文件会打包到static/css目录下，然而css中写的路径为相对路径，部署到服务器上的时候会将在原有的路径上加上static/css，比如static/css/static/img/a.png，这是因为我们使用 ExtractTextPlugin 插件，从所有构建的js文件抽离css生成一个单独的app.css文件，在js文件的地址是 ./static/img/a.png（注：地址不再你你vue源码中的相对路径，源码中比如是：../../../static/img/a.png）,现在这个图片被抽离到app.css中，图片地址没有进行处理（直接复制过来），通过app.css来访问图片的地址就是：app.css 地址 + 图片的相对路径 = xxx.com/static/css + ./static/img/a.png =  xxx.com/static/css/static/img/a.png，修改方法就是从app.css文件向上跳2级目录，去到static的根目录(我这里是网站的根目录)

　　解决：修改build/utils.js文件的publicPath为

if (options.extract) {

      return ExtractTextPlugin.extract({

        use: loaders,

        fallback: 'vue-style-loader',

        publicPath: '../../'

      })

    } else {

      return ['vue-style-loader'].concat(loaders)

    }

　　3.app.js文件过大

　　原因：所有的模块没有懒加载，直接打包到app.js中，请求的时候会进行全部加载

　　解决：vue提供了路由懒加载，只会加载当前路由需要的模块，其他模块只有在需要的时候才会进行加载，就像下边这样子写

const Home = resolve => require([ './home.vue' ], resolve)

const router = [

  {

    path: '/home',

    name: 'home',

    component: Home

  }

]

export default {

  router

}

　　路由这样子配置后再打包时候会将app.js进行拆分，比如下方多出了0,1,2这三个模块

static/js/0.5164e09da0419db62ee7.js 12.3 kB [emitted]
static/js/2.b600d06b55e36faa8138.js 7.13 kB [emitted]
static/js/1.4301e390162e718f7d7f.js 8.46 kB [emitted]
static/js/DrawingManager.js 14.4 kB [emitted]
static/js/app.74539da84116f2e87ba3.js 76.6 kB [emitted]

　　4.首屏加载慢

　　原因：比如即使做了路由懒加载，打包出来的app依旧很大,项目中用到的图片文件还是很大，请求的时候还是很费时间

　　解决：webpack在打包的时候将文件打包成gzip格式进行压缩，一般的静态资源服务器会默认开启gzip，如果在请求静态资源的时候，服务器发现有gzip格式会优先发gzip格式的，浏览器获取到gzip格式的资源再进行解压，这样可以减少传输的体积，首先

安装 compression-webpack-plugin

npm install --save-dev compression-webpack-plugin

然后，修改config/index.js文件

productionGzip: true,

productionGzipExtensions: ['js', 'css'],

在运行npm run build命令后，出现如下错误

D:\project\card-web\code>npm run build

> card-web@1.0.0 build D:\project\card-web\code
> node build/build.js

- building for production...D:\project\card-web\code\node_modules\compression-webpack-plugin\dist\index.js:175
compiler.hooks.emit.tapAsync({ name: 'CompressionPlugin' }, emit);

在网上查的解决办法是安装1.1.12版本的 compression-webpack-plugin 插件

打包后的文件如下

                 static/js/.bdad110050937896a84e.js.gz    13.6 kB          [emitted]

                 static/js/.828c628c40c4bc525ae7.js.gz    12.8 kB          [emitted]

                 static/js/.79ae7c6abc396b26d0b3.js.gz    8.26 kB          [emitted]

                 static/js/.d67fc44642bc1e9dbb20.js.gz       kB          [emitted]

                 static/js/.01e19cc92a46d69e9c56.js.gz    8.63 kB          [emitted]

                 static/js/.b83718664f10c5204a2b.js.gz    9.07 kB          [emitted]

                 static/js/.630f4cb6da91c2dd4d17.js.gz    4.08 kB          [emitted]

                 static/js/.3925a441b5923a83afca.js.gz    9.17 kB          [emitted]

                static/js/.b7bd2b50e9fe640388cb.js.gz    3.15 kB          [emitted]

                static/js/.b83e7d7f0ca68d3d7d2f.js.gz    7.13 kB          [emitted]

                static/js/.643bbb7e6a8a93221184.js.gz    5.32 kB          [emitted]

               static/js/app.5026a87c558010ba855a.js.gz    21.6 kB          [emitted]

                         static/js/DrawingManager.js.gz    14.4 kB          [emitted]

 static/css/app.c579ed9cc56fa8bbc397497ed7137724.css.gz    50.6 kB          [emitted]

                 static/js/.c3b717f99991333b6725.js.gz      kB          [emitted]

            static/js/vendor.f81088bb5c639380b4c5.js.gz      kB          [emitted]  [big]

　　附：用curl命令测试服务器时候开启Gzip

[root@yewu1 ~]# curl -I -H "Accept-Encoding: gzip, deflate" "http://test.szhqiot.top/static/js/manifest.32ac8929086abe9ca43c.js"

HTTP/1.1  OK

Server: nginx/1.14.

Date: Tue,  Oct  :: GMT

Content-Type: application/javascript

Last-Modified: Mon,  Oct  :: GMT

Connection: keep-alive

Vary: Accept-Encoding

ETag: W/"5bd6d9cc-6b4"

Content-Encoding: gzip

　　响应头出现Content-Encoding: gzip这说明服务器开始Gzip成功

　　4.f12后发现有项目中的打印信息，甚至断点

　　解决：修改 webpack.prod.conf.js 文件，UglifyJsPlugin 插件新增 drop_debugger ， drop_console 字段

uglifyOptions: {

     compress: {

          warnings: false,

          drop_debugger: true,

          drop_console: true

    }

},

　　

　　

　　

相关文章