vue项目上线优化包

 第一步.

找到vue.config.js..在里面修改代码

/*
1.确定开发环境
2.上线环境== 有些包不需要打包.直接使用线上的cdn
3.配置她
*/
// 获取当前的打包环境
const env = process.env.NODE_ENV
let externals = {}
if (env === 'production') {
//下面是自己所用的包..
//前面是包名
//后面是自己对应取得包名
  externals = {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    dayjs: 'dayjs',
    echarts: 'echarts',
    'element-ui': 'ElementUI',
    'vue-quill-editor': 'VueQuillEditor'
  }
}

// 覆盖默认的webpack配置
module.exports = {
  publicPath: './',
  devServer: {
    port: 8888,
    open: true
  },
  // 增强 vue-cli 的 webpack 配置项
  configureWebpack: {
    // 打包优化
    externals
  }
}

第二部.找到public下面得html文件.

导入第三方CDN资源

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
     <!-- 如果是开发环境 不要加载这些cdn资源, 如果是生产环境再加载这些资源 -->
    <% if(process.env.NODE_ENV === 'production') { %>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.2/dist/vue-router.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.3/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.6/dayjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.5/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
    <% } %>
    <!-- built files will be auto injected -->
  </body>
</html>

第三步.

yarn build`生成dist目录

### Vue 项目上线部署配置教程 #### 一、前端项目的准备工作 在将 Vue 项目部署到生产环境中之前,需要完成一系列的前置工作。以下是详细的步骤: 1. **配置反向代理解决跨域问题** 需要在 `vue.config.js` 文件中设置开发服务器的代理规则,以便解决前后端分离时可能存在的跨域请求问题。通过定义 `/api` 或其他自定义路径作为代理前缀,可以将前端请求转发至后端服务[^2]。 ```javascript const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ transpileDependencies: true, devServer: { proxy: { "/api": { target: "http://backend-server-url", // 替换为实际的后端 URL 地址 changeOrigin: true, // 允许跨域请求 }, }, }, }); ``` 2. **调整路由模式** 如果使用的是 `history` 模式的路由,在生产环境下可能会导致页面刷新时报错。因此建议切换为 `hash` 模式,并指定基础路径以匹配 Nginx 的静态资源映射规则[^3]。 ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ mode: 'hash', base: '/usr/local/blog/client/dist/', // 生产环境的基础路径 routes: [ // 定义路由规则... ], }); ``` --- #### 二、构建与打包 为了优化性能并减少体积,需对 Vue 项目进行构建和压缩操作。 1. **运行构建命令** 使用以下命令生成用于生产的静态文件: ```bash npm run build ``` 构建完成后会在项目根目录下生成一个名为 `dist` 的文件夹,其中含了所有的静态资源文件(HTML、CSS 和 JavaScript)以及图片等资产文件。 2. **上传静态资源** 将 `dist` 文件夹中的内容复制到目标服务器上的指定位置,例如 `/usr/local/webserve/static/` 目录下[^4]。 --- #### 三、Nginx 配置 为了让用户能够访问已部署的应用程序,还需要正确配置 Web 服务器(如 Nginx),使其能加载这些静态文件并将 API 请求重定向给后端服务。 1. **安装 Nginx** 在 CentOS 系统上可以通过如下方式快速安装 Nginx[^4]: ```bash sudo yum install epel-release -y sudo yum install nginx -y systemctl start nginx systemctl enable nginx ``` 2. **编辑 Nginx 配置文件** 修改默认站点配置文件(通常位于 `/etc/nginx/conf.d/default.conf` 或者创建一个新的 `.conf` 文件),添加类似下面的内容来支持 Vue 应用: ```nginx server { listen 80; server_name your-domain.com; root /usr/local/webserve/static; # 设置静态资源路径 index index.html; location / { try_files $uri /index.html; # 支持单页应用 (SPA) } location /api/ { proxy_pass http://backend-server-url/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 此处需要注意两点:一是确保 `root` 参数指向了正确的静态文件存储位置;二是对于涉及后端接口调用的部分应单独设立代理规则[^3][^4]。 3. **重启 Nginx** 更改完毕之后记得重新启动 Nginx 来使新设定生效: ```bash systemctl restart nginx ``` --- #### 四、测试与验证 最后一步就是确认整个流程无误——打开浏览器输入域名地址查看首页是否正常显示,尝试点击链接跳转不同页面以及提交表单等功能交互行为均按预期运作即可认为成功完成了部署过程。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值