-1

Tenho 2 projetos usando Vue v2.6.11 Ambos executo o Comando Yarn Build ( Script: "build": "vue-cli-service build" ) para gerar para produção.

Ambos salvam em pastas separadas seus respectivos arquivos tanto .html quanto .js (EX: Public/Projeto1/... e Public/Projeto2/...)

No arquivo .html do projeto1 se eu fizer alguma ateração por exemplo no

<title>Vue App Projeto1</title> 

ele nao sobrepoe depois do bulid.

Porém, no projeto2, ao fazer essa alteração

<title>Vue App Projeto2</title> 

depois do build ele volta para o padrão

<title>Vue App</title> 

Alguem sabe me informar como isso esta realemente trabalhando? tentei verificar os arquivos para ver as diferenças mas nao consegui entender muito e gostaria de aprender.

Projeto2 vue.config.js

const path = require("path");

module.exports = {
    outputDir: "../../public/projeto2",
    publicPath: "/projeto2/",
    chainWebpack: config => {
        config.module.rules.delete('eslint');
    },
};

babel.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ] }

Projeto1 vue.config.js

const path = require("path");

module.exports = {
    outputDir: "../../public/projeto1",
    publicPath: "/projeto1/",
    chainWebpack: config => {
        config.module.rules.delete('eslint');
    },
};

babel.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ] }

Espero ter explicado tudo direitinho... hehe Agradeço a todos desde ja pela atenção. =D

Ja tentei alterar as pastas e reinstalar tudo.. mas nao obtive sucesso.

1 Resposta 1

0

Não dá pra saber como está a estrutura de pastas do seu projeto atualmente, nem se utiliza o build padrão definido pelo vue-cli-service.

Mas supondo que não personalizou a rotina de build do projeto, então seria possível fazer essa mudança em seu projeto.

Dentro do diretório public é possível ver o arquivo "base" do html.

É neste arquivo que serão injetados as informações feitas durante o build.

Desta forma, para personalizar o title que é gerado, basta atribuir um valor padrão.

Vejo duas forma de fazer isso, sobreescrever diretamente o valor da tag html title de uma forma que ela não seja sobrescrita no momento do build. Isso vai fazer com que o texto seja sempre o mesmo, seria um valor estático.

Desta forma pode fazer a alteração diretamente no arquivo contido no diretório public do seu projeto gerado com o vue-cli.

Supondo que seu projeto foi gerado com vue-cli e que possui o nome: "projeto"

Então teria a seguinte estrutura de pastas:

.
├── _babel.config.js
├── _package-lock.json  
├── _package.json
├── _public
│   ├── favicon.ico
│   └── index.html
└── _src
    ├── components
    ├── assets
    ├── App.vue
    └── main.js

Consigo ver duas soluções para o seu problema

Você pode editar o arquivo do diretório public/index.html

Para não sobre-escrever a tag title no momento do build, da seguinte forma:

Antes da mudança a tag title está com a configuracão:

<title><%= htmlWebpackPlugin.options.title %></title>

Modificar para conter um título estático, que não será sobrescrito no momento do build da seguinte forma:

<title>Projeto</title>

Todas as mudanças acima foram feitas no arquivo public/index.html

A segunda forma é você sobre-escrever o valor que é interpolado no momento do build, na configuração padrão o vuejs utiliza o atributo "name" que está contido no arquivo package.json

Desta forma ao modificar o valor deste atributo no package.json no momento do build este valor será interpolado no arquivo public/index.html para a geração do build.

Como resultado final [após a rotina de build] o arquivo index.html gerado na pasta dist vai conter aquele valor. Então apenas substituindo o atributo name do package.json deve fazer o que deseja.

Para este resultado então edite apenas o package.json

{
  "name": "projetoblabla", //<-- Mudar esta linha
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  //resto do arquivo...  
}

Nesta mudança não será necessário mudar o arquivo index.html (pois ele já possui a configuração de interpolação).

Para outras personalizações consultar a documentação do webpack

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .