Creación de una sola salida de archivo JS

Para configurar Vue CLI para generar un solo archivo .js :

1. Deshabilite la extracción de CSS con css.extract=false .
2. Deshabilite la división de fragmentos de Webpack con configureWebpack.optimization.splitChunks=false .

 // vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ ⋮ css: { extract: false, 1️⃣ }, configureWebpack: { optimization: { splitChunks: false, 2️⃣ }, }, })

Luego, la compilación produce un directorio dist que contiene estos archivos:

 dist/js/app.bd71ae48.js # all app code, including template, scripts, and styles dist/js/app.bd71ae48.js.map # source map for development (optional) dist/favicon.ico # favicon shown in browser (optional) dist/index.html # initial index (optional)

Uso en fantasma

1. En la página de tu blog, inserta un bloque HTML personalizado .

2. En el bloque HTML, agregue un div con una ID que coincida con el punto de montaje en src/main.js desde la fuente original de su aplicación (la ID predeterminada es "app" ).

    <div id="app">Vue app loading...</div>

3. Agregue un <script> que extraiga el archivo app.js creado previamente. Por ejemplo, si ha alojado la secuencia de comandos en GitHub, podría usar un enlace CDN como este:

    <script src="https://cdn.jsdelivr.net/gh/tony19-sandbox/vue-cli-single-js-file@master/dist/js/app.bd71ae48.js"></script>

4. Noté que el ícono y el encabezado de Vue de la aplicación están alineados incorrectamente (probablemente debido a los estilos Ghost heredados), así que compénselo agregando un <style> al bloque HTML que los vuelve a centrar.

    <style> /* compensate for Ghost styles overriding the app's alignment */ #app { display: flex; flex-direction: column; align-items: center; } </style>

El resultado se ve así:

GitHub

página fantasma

El vue cli tiene un comando para esto: https://cli.vuejs.org/guide/build-targets.html#library

Debe pasar este comando --target lib a la compilación vue-cli-service build . Esto significa que solo desea un archivo final.

Además, puede pasar otros atributos, como:

• --inline-vue , que incluirá el Vue en su paquete, lo que se recomienda, según su caso de uso;
• --name , el nombre de su archivo de paquete;
• y al final del comando, el punto de entrada para su aplicación, que es src/Vue.js por defecto, pero puede ser main.js , por ejemplo. Tienes que probar en función de cómo creaste tu aplicación;

Entonces, puedes probar una de estas combinaciones:

 vue-cli-service build --target lib vue-cli-service build --target lib --inline-vue vue-cli-service build --target lib --inline-vue --name myApp vue-cli-service build --target lib --inline-vue --name myApp src/main.js