项目上线相关注意事项

项目上线

1、打包相对路径修改

我们使用npm run build 或 npm run serve 打包好的项目默认，请求地址默认都是 / 开头的，这个/ 就是我们的项目的根路径。

解决：

1. 不推荐：我们可以把dist文件夹当成项目的路径，若有多个项目就不符合需求。

2. 推荐：我们可以修改 vue.config.js 文件的配置项

   const { defineConfig } = require('@vue/cli-service')
   module.exports = defineConfig({
     transpileDependencies: true,
     // 关闭eslint
     lintOnSave: false,
     // 修改打包后的访问路径(生产环境)。
     publicPath: './'
   })
   

2、开发和生产路径问题

根据上面的配置项来进行开发显然会出问题的，有没有一种方式不用手动修改呢？

解决：

• 我们可以通过使用process.env.NODE_ENV 这个node的内置变量来修改

• npm run serve：process.env.NODE_ENV的值就是'development'字符串

• npm run build：process.env.NODE ENV的值就是'production'字符串

  const { defineConfig } = require('@vue/cli-service')
  module.exports = defineConfig({
    transpileDependencies: true,
    // 关闭eslint
    lintOnSave: false,
    // 修改打包后的访问路径(生产环境)。
    // 
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
  })
  

3、dist瘦身

问题：我们通过npm run build 构建项目以后发现dist文件夹21M ，为什么别人那么大的项目打完包才几十M，通过查阅资料找到了一些办法

1. 可以通过vue.config.js中的配置项，排除第三发插件减少整体的体积
2. 此时打包的index.html肯定是有问题的，主要的问题就是我们讲原来项目有的给派出了，我们可以通过CDN加速的方式，引入js/css文件，这样既给项目瘦身了还给项目带了优化
3. 极大提高了打包速度以及构建项目的速度，提高了开发的效率，

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  lintOnSave: false,
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  configureWebpack: {
    externals: {
      'echarts': 'echarts',
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'dayjs': 'dayjs',
      'element-ui': 'ELEMENT',
      'vue-quill-editor': 'VueQuillEditor',
      'vuex-persistedstate': 'createPersistedState'
    }
  }
})

index.html

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.8/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.core.css">
<link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.snow.css">
<link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.bubble.css">

<script src="https://unpkg.com/echarts@5.3.2/dist/echarts.min.js"></script>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
<script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
<script src="https://unpkg.com/dayjs@1.11.3/dayjs.min.js"></script>
<script src="https://unpkg.com/element-ui@2.15.8/lib/index.js"></script>
<script src="https://unpkg.com/quill@1.3.7/dist/quill.js"></script>
<script src="https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
<script src="https://unpkg.com/vuex-persistedstate@3.2.1/dist/vuex-persistedstate.umd.js"></script>
<script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>

4、两种工作模式

1. 对呀一个url来说，什么是hash值？-------#/及其后面的内容就是hash值

2. hash值不会包括含在 HTTP 请求中，即：hash值不会带给服务器

3. hash模式：

   1）地址中永远带着#号，不美观

   2）若以后将地址通过第三方收集app分享，若app校验严格，则地址会被标记为不合法

   3）兼容性较好。

   4）使用 URL 中的哈希（#）来模拟一个完整的 URL，当 URL 的哈希改变时，Vue Router 会通过监听 hashchange 事件来响应并渲染对应的组件。

4. history模式：

   1）地址干净，美观

   2）兼容性和hash模式相对略差

   3）应用部署上线时需要后端人员支持，解决刷新页面服务器404的问题

   4）通过使用 HTML5 History API 中的 pushState 和 replaceState 方法，Vue Router 可以修改浏览器的 URL，并且不会重新加载页面。这样可以产生干净的 URL，没有 # 符号。