vuetify.js
import "material-design-icons-iconfont/dist/material-design-icons.css";
import Vue from "vue";
import Vuetify from "vuetify/lib";
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: "md"
}
});
main.js
...
new Vue({
i18n,
router,
vuetify,
render: h => h(App)
}).$mount("#app");
vue.config.js
const BundleTracker = require("webpack-bundle-tracker");
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
publicPath: "static/",
outputDir: "./dist/",
chainWebpack: (config) => {
config.module
.rule('vue')
.use('vuetify-loader')
.loader('vuetify-loader')
.tap(options => {
console.log(options); // undefined
return options
})
config.resolve.extensions.add('.ts');
config
.plugin("BundleTracker")
.use(BundleTracker, [{ filename: "./webpack-stats.json" }]);
config.output.filename("bundle.js");
config.optimization.splitChunks(false);
config.resolve.alias.set("__STATIC__", "static");
config.devServer
// the first 3 lines of the following code have been added to the configuration
// .public("http://125.183.143.159:8080")
// .host("localhost")
.public('http://127.0.0.1:8080')
.host('127.0.0.1')
.port(8080)
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.disableHostCheck(true)
.headers({ "Access-Control-Allow-Origin": ["*"] });
},
transpileDependencies: ["vuetify"],
lintOnSave: false,
// uncomment before executing 'npm run build'
css: {
extract: {
filename: 'bundle.css',
chunkFilename: '[id].[chunkhash].css',
}
}
};
I got broken ui.
I dont know why style not applied after npm run build.
I run python manage.py collectstatic And there is no error with response.
But the problem is I guess css doesn't include all style tags. For example, I was trying to find primary style for btn color. But there is not code of that style.
I guess that's not relative with custom style. Because almost every styles don't work properly. Maybe tree shaking has some problem.
npm run build log is here
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
(djangovenv) PS C:\Users\Administrator\project\onepaper\frontend> npm run build
> frontend@0.1.0 build C:\Users\Administrator\project\onepaper\frontend
> vue-cli-service build
\ Building for production...Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
- Building for production...
WARNING Compiled with 2 warnings 2:09:18 ├F10: PM┤
warning
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
img/do.88a82fcc.svg (443 KiB)
img/do.704fd2a9.svg (456 KiB)
bundle.css (459 KiB)
bundle.js (430 KiB)
js/chunk-129d8e9c.688c9edd.js (319 KiB)
js/chunk-7b741fe2.93e1653f.js (346 KiB)
js/chunk-88bc60dc.48894185.js (439 KiB)
warning
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (889 KiB)
bundle.css
bundle.js
File Size Gzipped
dist\js\chunk-88bc60dc.48894185.js 439.24 KiB 101.59 KiB
dist\bundle.js 430.30 KiB 137.16 KiB
dist\js\chunk-7b741fe2.93e1653f.js 346.20 KiB 83.70 KiB
dist\js\chunk-129d8e9c.688c9edd.js 318.80 KiB 70.60 KiB
dist\js\chunk-9dd40366.75afaed9.js 91.64 KiB 23.57 KiB
dist\js\chunk-7bf7d6c6.c494a07d.js 86.21 KiB 22.43 KiB
dist\js\chunk-2b56d110.d1eb2860.js 50.95 KiB 14.80 KiB
dist\js\chunk-421ea5c0.84a6cf97.js 49.75 KiB 15.26 KiB
dist\js\chunk-579f7a04.941fd13f.js 47.44 KiB 13.35 KiB
dist\js\chunk-deddd822.4656d00f.js 17.56 KiB 5.66 KiB
dist\js\chunk-371f0aa5.95423761.js 13.89 KiB 4.88 KiB
dist\bundle.css 458.95 KiB 61.26 KiB
dist\chunk-88bc60dc.685122b2a5999d0f5608.css 87.02 KiB 12.07 KiB
dist\chunk-7b741fe2.850bc4a677d48892ff19.css 72.83 KiB 10.02 KiB
dist\chunk-129d8e9c.680d2c1c751564c3afd4.css 49.54 KiB 6.58 KiB
dist\chunk-9dd40366.c83c9f177588e6dd2b74.css 33.68 KiB 5.13 KiB
dist\chunk-7bf7d6c6.ea5a9a7d5e2a3a016c16.css 32.47 KiB 4.88 KiB
dist\chunk-2b56d110.949136521d3177d989e2.css 21.89 KiB 3.62 KiB
dist\chunk-579f7a04.b9f26f0bd2db79f122d5.css 18.58 KiB 3.04 KiB
dist\chunk-421ea5c0.1a111444deb64b94ae61.css 17.54 KiB 2.82 KiB
dist\chunk-371f0aa5.ced9d8a13720477102c2.css 16.00 KiB 2.50 KiB
dist\chunk-deddd822.07950a216d512db261ae.css 16.00 KiB 2.50 KiB
When I run it in npm run serve All style is OK.
How can I solve this problem? Please help.