vue-cli小记录

最新推荐文章于 2024-09-13 14:34:15 发布

景景啊

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量148

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_36279884/article/details/105202356

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue-cli小记录

方便操作打包时选择环境

1.可以为特定的环境准备不同的文件.必须以**.env **开头的文件.这样才能被vue-cli加载
你运行serve会默认使用development环境模式,build是production模式

你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。
在这里插入图片描述

环境已经区分,那打包的时候选择是哪个环境打包.是测试打包还是生产打包.在package中设置
mode就达标选择哪个模式后面跟着你定的开发模式,这样打包的时候就不要去手动改地址

设置代理(vue运行代理,和nginx代理,解决跨域)

1.前端跨域,我们在用vue的时候已经安装了一个node,当我们启动项目时,项目就是运行在node服务器上,我们在vue.config.js中设置代理,这样我们在写项目请求后端接口就不会产生跨域问题了
在这里插入图片描述

2.我们打包的时候,会把项目放在另外一个服务器中,离开了node,所以在文件里面的代理就没用了.我们把项目放在nginx中运行,我们打包完自己要试一下能不能正常运行,然后再给后端放到公司服务器下
在这里插入图片描述

upstream my_server {                                                         
        server 需要被代理的地址;                                                
        keepalive 2000;
    }
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /api/ {
            proxy_pass http://my_server/;
            proxy_set_header Host $host:$server_port;
            add_header backendIP $upstream_addr;
            add_header backendCode $upstream_status;
        }
        
        location / {
            root   G:/dist/;
            index  index.html index.htm;
        }

这里我是为了看我打包之后,network里面看我代理的地址真实地址.,因为代理之后,地址会变成本地ip请求
在这里插入图片描述

vue-cli开启压缩,后端也开启压缩

使用压缩模式.减小代码体积,提高加载效率

1.首先安装压缩插件
npm i -D compression-webpack-plugin
链接: https://www.webpackjs.com/plugins/compression-webpack-plugin/.
这里面有解释里面的选项都是什么意思
在这里插入图片描述
2.vue.config.js文件

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']

configureWebpack: config => {
    config.plugins.push(
    // 开启压缩
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp(
          '\\.(' + productionGzipExtensions.join('|') + ')$'
        ),
        threshold: 10240,
        minRatio: 0.8
      })
    )
  }

在这里插入图片描述