Ejemplo de sistema de gestión de comercio electrónico de Vue + ElementUI 26 Optimización del proyecto: personalización del contenido de la página de inicio

Estrategia de optimización del proyecto

7. Personaliza el contenido de la página de inicio

En diferentes entornos de empaquetado, el contenido de la página de inicio puede ser diferente. Podemos usar el método de complemento para la sincronización. La configuración del complemento es la siguiente:

chainWebpack: config => { 
  config.when (process.env.NODE_ENV === 'production', config => { 
    config.plugin ( 'html'). tap (args => { 
      args [ 0] .isProd = true 
      return args 
    }) 
  }) 
  config.when (process.env.NODE_ENV === 'desarrollo', config => { 
    config.plugin ( 'html'). tap (args => { 
      args [ 0] .isProd = false 
      return args 
    }) 
  }) 
}

En la página de inicio public / index.html, puede decidir cómo representar la estructura de la página en función del valor de isProd:

<! - prestación Título demanda de la página ->
 < titulo > <% = htmlWebpackPlugin.options.isProd? ' ': 'Dev -' %> sistema de gestión de proveedor de electricidad de back-end </ titulo > ; < ! - Demanda Cargue recursos CDN externos- > < % if (htmlWebpackPlugin.options.isProd) { %> <! - Recursos CDN externos cargados a través de externos- > <% } %>

Abra vue.config.js para agregar código:

module.exports = { 
  chainWebpack: config => {
     // Modo de lanzamiento - Entrada del paquete en la etapa de lanzamiento 
    config.when (process.env.NODE_ENV === 'production', config => { 
      config.entry ( 'app') .clear (). add ('./ src / main-prod.js' )
       // externals Cargar recurso externo CDN 
      config.set ('externals' , { 
        vue: 'Vue' ,
         'vue-router': 'VueRouter' , 
        axios: 'axios' , 
        lodash: '_' , 
        echarts: 'echarts' , 
        nprogress:'NProgress' ,
        'vue-quill-editor': 'VueQuillEditor' 
      }) 
      // Personalización de la página de inicio 
      config.plugin ('html'). tap (args => { 
        args [ 0] .isProd = true 
        return args 
      }) 
    }) 
    // Modo de desarrollo 
    - Entrada de paquete en la etapa de desarrollo config.when (process.env.NODE_ENV === 'development', config => { 
      config.entry ( 'app'). Clear (). Add ('./ src / main-dev .js ' )
       // Personalización de la página de inicio 
      config.plugin (' html '). tap (args => { 
        args [ 0].isProd = falsos 
        retorno args 
      }) 
    }) 
  } 
}

Abra el archivo index.html:

< Título > <% = htmlWebpackPlugin.options.isProd? ' ': 'Dev -' %> sistema de proveedor de electricidad de gestión de back-end </ title> 
< ! - la demanda de carga de los recursos externos CDN -> 
< % SI (htmlWebpackPlugin. options.isProd) { %> 
      <! - nprogress style sheet file- > 
      < link rel = "stylesheet" href = "https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css "  /> 
      <! - Archivo de hoja de estilo del editor de texto enriquecido- > 
      < link rel =" stylesheet " href =" https: // cdn.staticfile.org/quill/1.3.6/quill.core.min.css " /> 
      < link rel = "stylesheet" href = "https://cdn.staticfile.org/quill/1.3.6/quill.snow.min.css"  /> 
      < link rel = "stylesheet" href = "https: //cdn.staticfile.org/quill/1.3.6/quill.bubble.min.css "  /> 
      <! - element-ui 的 样式 表 文件-> 
      < link rel =" stylesheet " href =" https: //cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css "  /> 
      <! - element-ui 的 js 文件-> 
      < script src =" https: // cdn. staticfile.org/element-ui/2.13.0 / index.js " > </ script> 
      < script src = "https://cdn.staticfile.org/vue/2.6.10/vue.min.js" > </ script > 
      < script src = "https://cdn.staticfile.org/vue- router / 3.1.3 / vue-router.min.js " > </ script > 
      < script src =" https://cdn.staticfile.org/axios/0.19.0/axios.min.js " > </ script > 
      < script src = "https://cdn.staticfile.org/lodash.js/4.17.15/lodash.min.js" > </ script > 
      < script src = "https://cdn.staticfile.org/ echarts / 4.7.0 / echarts.min.js " > </ script> 
      < script src = "https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js" > </ script > 
      <! - 富 文本 编辑 器 的 js 文件-> 
      < script src = "https://cdn.staticfile.org/quill/1.3.6/quill.min.js" > </ script > 
      < script src = "https://cdn.jsdelivr.net/npm/vue-quill- [email protected]/dist/vue-quill-editor.js " > </ script > 
<% } %>

Abra el panel visual de la interfaz de usuario, deténgase primero en el servicio y luego vuelva a ejecutarlo. En este punto, el proyecto puede ejecutarse normalmente y se resuelve el problema de redefinir la ruta anterior.

 

También puede ver el sistema de administración de fondo de comercio electrónico de desarrollo en el título y luego hacer clic con el botón derecho para ver el código fuente y descubrir que no se hace referencia a recursos CDN externos.

Luego, en la compilación, haga clic en ejecutar. Después de una edición exitosa, abra el archivo index.html en la carpeta dist, puede encontrar el título y la referencia para cargar recursos CDN externos.