Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Npm Run Build is removing all quotes (Cli 4.0) #10795

Closed
nicolas15000 opened this issue Nov 4, 2019 · 5 comments

Comments

@nicolas15000
Copy link

@nicolas15000 nicolas15000 commented Nov 4, 2019

Version

2.6.10

Reproduction link

TEST, PLEASE LOOK IT IS WHITE

Steps to reproduce

I have this Vue.js 2.6 app done with Vue CLI v4.0 ,

Now i want to publish my app, so I run :
npm run build

Then, the dist directory is created and index.html is missing all of the quotes, so i 've got a blank page, and nothing is working .
How could i disable minimify and uglify ?

This is the generated index.html :

   <!DOCTYPE html>
    <html lang=en>
    
    <head>
        <meta charset=utf-8>
        <meta http-equiv=X-UA-Compatible content="IE=edge">
        <meta name=viewport content="width=device-width,initial-scale=1">
        <link rel=icon href=/favicon.ico>
        <title>hello-world</title>
        <link href=/css/app.3f9f2270.css rel=preload as=style>
        <link href=/css/chunk-vendors.47cb9f4a.css rel=preload as=style>
        <link href=/js/app.8cbe294c.js rel=preload as=script>
        <link href=/js/chunk-vendors.639e9df3.js rel=preload as=script>
        <link href=/css/chunk-vendors.47cb9f4a.css rel=stylesheet>
        <link href=/css/app.3f9f2270.css rel=stylesheet>
    </head>
    
    <body>
        <noscript><strong>We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
        <div id=app></div>
        <script src=/js/chunk-vendors.639e9df3.js></script>
        <script src=/js/app.8cbe294c.js></script>
    </body>
    
    </html>

Note :
When using a preview server, the app is showing correctly :

npm install -g serve
# -s flag means serve it in Single-Page Application mode
# which deals with the routing problem below
serve -s dist

This is my package.json , do you see something abnormal ?

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@jeremyhamm/vue-slider": "^0.1.16",
    "apexcharts": "^3.10.1",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "core-js": "^3.3.6",
    "jquery": "^3.4.1",
    "mocha-webpack": "^2.0.0-beta.0",
    "popper.js": "^1.16.0",
    "sweet-modal-vue": "^2.0.0",
    "vue": "^2.6.10",
    "vue-apexcharts": "^1.5.1",
    "vue-axios": "^2.1.5",
    "vue-cal": "^2.13.1",
    "vue-js-modal": "^1.3.31",
    "vue-router": "^3.1.3",
    "vue-sidebar-menu": "^4.4.1",
    "vuelendar": "^1.0.0"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",
    "@vue/cli-plugin-babel": "^4.0.5",
    "@vue/cli-plugin-router": "^4.0.5",
    "@vue/cli-plugin-unit-mocha": "^4.0.5",
    "@vue/cli-service": "^4.0.5",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.3",
    "chai": "^4.2.0",
    "eslint": "^6.6.0",
    "eslint-plugin-vue": "^5.2.3",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)"
        ],
        "env": {
          "mocha": true
        }
      }
    ]
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

What is expected?

it is suppose to work directly so i can display the website .
I 'm supposed to place the dist directory to any web server .

What is actually happening?

Quotes are removed from any where, probably not only index.html but through all of the app, so I can't make it work . It seems to have started with cli 4.0


no

@sodatea

This comment has been minimized.

Copy link
Member

@sodatea sodatea commented Nov 4, 2019

Wrong repo.
Also, these quotes in HTML are optional. So removing them is for size concerns. See http://perfectionkills.com/experimenting-with-html-minifier/#remove_attribute_quotes

@sodatea sodatea closed this Nov 4, 2019
@nicolas15000

This comment has been minimized.

Copy link
Author

@nicolas15000 nicolas15000 commented Nov 4, 2019

Thank you, Sodatea, I understand now.

Hello !, I'm in the dist directory , then I install serve https://www.npmjs.com/package/serve , then i type this :

serve

Now i can access the dist app from http://localhost:5000 inside of my navigator.

The problem is this :

As long as I place the dist folder inside of my old apache server UWAMP 3.10, it wont work . Do you know if Vue can't be used from an apache server any more as long as it is generated by webpack ?

@sodatea

This comment has been minimized.

Copy link
Member

@sodatea sodatea commented Nov 4, 2019

Likely due to misconfigurations of the Apache server.
I'm no expert on Apache stuff. Better to ask it on the forum.

@nicolas15000

This comment has been minimized.

Copy link
Author

@nicolas15000 nicolas15000 commented Nov 4, 2019

It isn't working, I need this to work, vue without webpack is working really well on apache servers , how can I disable webpack uglifyer and minifier please, this breaks all of the code during the NPM BUILD process.

https://stackoverflow.com/questions/58698728/place-the-dist-directory-on-uwamp-and-apache-servers

@nicolas15000

This comment has been minimized.

Copy link
Author

@nicolas15000 nicolas15000 commented Nov 4, 2019

EDIT : HEY ! Placed the whole DIST content inside of a NODE.JS server, inside a PUBLIC directory served by the node backend , like this :

app.use(express.static("public"));

And now the app is currently working ! I guess It's time to abandon Apache servers when using webpack ?.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.