Problems importing some css inside index.ejs (index.html)
fzamperin opened this issue · comments
Hi @cristijora, first thanks for this contribution, I have an issue about handling static files, I changed the html entry point to /views/index.ejs file and I'm using vue-paper-dashboard with expressjs. I got stuck when I generate the index.ejs since I changed from index.html, this is the file:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel=apple-touch-icon sizes=76x76 href=assets/img/apple-icon.png> <!-- HERE -->
<link rel=icon type=image/png sizes=96x96 href=static/img/favicon.png> <!-- HERE -->
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<title>Express Vue Paper Dashboard</title>
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<link type=text/css href="https://fonts.googleapis.com/css?family=Muli:400,300" rel=stylesheet>
<link type=text/css href="https://fonts.googleapis.com/css?family=Montserrat" rel=stylesheet>
<link href=static/css/themify-icons.css rel=stylesheet> <!-- HERE -->
<link href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet>
<link href=public-dashboard/css/app.a0ce48eedd81206b4d119d80c9e4cf81.css rel=stylesheet>
</head>
<body>
<div class=wrapper id=app></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAamVCoyQ4AuvBpxVRMs9P-HFkfPVQj0Kw"
type=text/javascript></script>
<script type=text/javascript src=public-dashboard/js/manifest.4c40b5d6fa68ad9d5108.js></script>
<script type=text/javascript src=public-dashboard/js/vendor.817190a87c3939682014.js></script>
<script type=text/javascript src=public-dashboard/js/app.2e7d941cab7ce8abec84.js></script>
</body>
</html>
But I can't change the <link rel=apple-touch-icon sizes=76x76 href=assets/img/apple-icon.png>, <link rel=icon type=image/png sizes=96x96 href=static/img/favicon.png> and <link href=static/css/themify-icons.css rel=stylesheet>, I already configured to point to a new public folder called public-dashboard inside the root folder but when I generate a new build it resets to static and assets directory. If I change it manually it works like a charm but I don't know why it still using static and assets folder. Any help would be very nice, thanks in advance.
- EDIT: This is my config/index.js file:
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../views/index.ejs'),
assetsRoot: path.resolve(__dirname, '../public-dashboard'),
assetsSubDirectory: '',
assetsPublicPath: process.env.HOST ? process.env.HOST : 'public-dashboard/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'api': {
target: 'http://localhost:3000',
changeOrigin: true
},
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}
Hi @fzamperin
I cannot tell why this is happening by looking only at these configs.
I would try to put some / before those references or play around with assetsPublicPath by changing to /public-dashboard
As much as I would like to help, unfortunately this doesn't seem to be an issue specific to this template. If you have repo with the whole thing, maybe I can take a look and help if I can.
Thanks a lot, I turned the repo in public mode, this issue only happens when I build in production mode, in dev mode the index.html works fine since is another server starter by the dashboard application. Here is the link https://gitlab.com/oniqlab/express-vue-paper-dashboard
- EDIT: Actually this is the entry repo that me and my partners created to serve as a boiler plate, but this one contains exactly the same issue when build in production
@fzamperin I cannot access the provided link (Page not found) Can you find me on discord and chat in private ?
Closing due to inactivity