vue打包构建以及性能优化

打包构建优化

1、在配置里面设置 productionSourceMap: false，代码打包后没有.map文件

2、用路由懒加载

3、看体积，有没有优化的空间（比如说没必要引入整个 Element，可以根据需要仅引入部分组件）

在package.json里面配置

"report": "vue-cli-service build --report"

执行npm run report打包，最后dist文件里面会有一个report.html的分析报告，看一下有没有优化的空间

 

打包后运行

1、如果电脑里面有装python的话，可以用命令行python来运行

（如果本地的接口可能请求不到,需要搭建node服务来代理接口，https://blog.csdn.net/Dj_Fairy/article/details/84628189）

PS F:\2019\three\favorite> cd dist
PS F:\2019\three\favorite\dist> python -m SimpleHTTPServer 8888

2、配置nginx来运行

在nginx==>conf==>nginx.conf文件里面配置

server {
        listen       81;
        server_name  localhost;

        location / {
            root   F:/2019/four/vue-sell-next/dist;
            index  index.html;
        }
    }