jamie-yang / vue3-boilerplate Goto Github PK
View Code? Open in Web Editor NEWA Vue 3 Starter Boilerplate with Webpack 5, Vue Router 4, Pinia 2, TypeScript 5, Prettier and More.
License: MIT License
A Vue 3 Starter Boilerplate with Webpack 5, Vue Router 4, Pinia 2, TypeScript 5, Prettier and More.
License: MIT License
I've this scss code in the file src/assets/styles/_fonts.scss
:
@font-face {
font-family: 'Share Tech';
src: url('../fonts/MY-FONT.eot');
src: url('../fonts/MY-FONT.eot?#iefix') format('embedded-opentype'),
url('../fonts/MY-FONT.woff2') format('woff2'),
url('../fonts/MY-FONT.woff') format('woff'),
url('../fonts/MY-FONT.ttf') format('truetype'),
url('../fonts/MY-FONT.svg#MY-FONT') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
and I've in the folder src/assets/fonts
the fonts specified right above in the scss
and I've the import in the main file src/App.vue
<style lang="scss">
@import './assets/styles/_fonts.scss';
</style>
This error occurs:
<e> Module build failed (from ./node_modules/css-loader/dist/cjs.js):
<e> Error: Can't resolve '../fonts/MY-FONT.eot' in '/ABSOLUTE-PATH'
ideas on how to fix it?
I was able to see it working locally only setting this scss code into src/App.vue
but once built, the fonts are not properly included, of course.
@font-face {
font-family: 'Share Tech';
src: url('../src/assets/fonts/MY-FONT.eot');
src: url('../src/assets/fonts/MY-FONT.eot?#iefix') format('embedded-opentype'),
url('../src/assets/fonts/MY-FONT.woff2') format('woff2'),
url('../src/assets/fonts/MY-FONT.woff') format('woff'),
url('../src/assets/fonts/MY-FONT.ttf') format('truetype'),
url('../src/assets/fonts/MY-FONT.svg#MY-FONT') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
thanks for the help
Hello, i'm curious about 2 div with same id #app
is there any feature related about this?
the one in public/index.html
vue3-boilerplate/public/index.html
Line 10 in 8b9c263
and in src/App.vue
Line 2 in 8b9c263
Considering an App.vue
like this one
<template>
<div id="app">
<router-view />
</div>
</template>
<style lang="scss">
@font-face {
font-family: 'Share Tech';
src: url('../src/assets/fonts/ShareTech-Regular.eot');
src:
url('../src/assets/fonts/ShareTech-Regular.eot?#iefix') format('embedded-opentype'),
url('../src/assets/fonts/ShareTech-Regular.woff2') format('woff2'),
url('../src/assets/fonts/ShareTech-Regular.woff') format('woff'),
url('../src/assets/fonts/ShareTech-Regular.ttf') format('truetype'),
url('../src/assets/fonts/ShareTech-Regular.svg#ShareTech-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
</style>
here prettier of complains
<e> src/App.vue:15:7
<e> 13 | font-family: 'Share Tech';
<e> 14 | src: url('../src/assets/fonts/ShareTech-Regular.eot');
<e> > 15 | src:
<e> | ^
<e> 16 | url('../src/assets/fonts/ShareTech-Regular.eot?#iefix') format('embedded-opentype'),
<e> 17 | url('../src/assets/fonts/ShareTech-Regular.woff2') format('woff2'),
<e> 18 | url('../src/assets/fonts/ShareTech-Regular.woff') format('woff'),
<e>
<e> ✘ 1 problem (1 error, 0 warnings)
<e>
<e>
<e> Errors:
<e> 1 https://google.com/#q=prettier%2Fprettier
<e>
Considering the same App.vue
like this one
<template>
<div id="app">
<router-view />
</div>
</template>
<style lang="scss">
@font-face {
font-family: 'Share Tech';
src: url('../src/assets/fonts/ShareTech-Regular.eot');
src: url('../src/assets/fonts/ShareTech-Regular.eot?#iefix') format('embedded-opentype'),
url('../src/assets/fonts/ShareTech-Regular.woff2') format('woff2'),
url('../src/assets/fonts/ShareTech-Regular.woff') format('woff'),
url('../src/assets/fonts/ShareTech-Regular.ttf') format('truetype'),
url('../src/assets/fonts/ShareTech-Regular.svg#ShareTech-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
</style>
then stylelint complains
$ stylelint "./src/**/*.vue" "./src/**/*.scss"
src/App.vue
15:6 ✖ Expected newline after ":" with a multi-line declaration declaration-colon-newline-after
Add gzip compression feature for the build files.
I have simply clone this and use the following steps.
E:\test\Vue3\vue3-boilerplate\node_modules\vue-loader\dist\pluginWebpack5.js:68 throw new Error(
[VueLoaderPlugin Error] No matching use for vue-loader is found.\n` +Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
at VueLoaderPlugin.apply (E:\test\Vue3\vue3-boilerplate\node_modules\vue-loader\dist\pluginWebpack5.js:68:19)
at createCompiler (E:\test\Vue3\vue3-boilerplate\node_modules\webpack\lib\webpack.js:70:12)
at webpack (E:\test\Vue3\vue3-boilerplate\node_modules\webpack\lib\webpack.js:113:14)
at f (E:\test\Vue3\vue3-boilerplate\node_modules\webpack\lib\index.js:31:15)
at Object. (E:\test\Vue3\vue3-boilerplate\service\commands\serve.js:18:18)
at Module._compile (internal/modules/cjs/loader.js:1185:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1205:10)
at Module.load (internal/modules/cjs/loader.js:1034:32)
at Function.Module._load (internal/modules/cjs/loader.js:923:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve: node service/commands/serve.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\H.Muhammad Kamran\AppData\Roaming\npm-cache_logs\2020-06-23T02_43_46_492Z-debug.log`
using node v16.0.0
node:internal/modules/cjs/loader:1125
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/x/Documents/Sites/test/node_modules/strip-ansi/index.js
I get error ReferenceError: VUE_APP_TITLE
is not defined when I use <%= VUE_APP_TITLE %>
inside public/index.html
service/config/base.js
__VUE_OPTIONS_API__: 'true',
At least I cannot console.log(__VUE_OPTIONS_API__)
I've tried to add service worker to the project. But it seems not to work. Can you add the next branch for this solution?
The topic I read: https://dev.to/voodu/vue-3-pwa-service-worker-12di
My Error when add service into base.config file:
Error: NormalModuleFactory.afterResolve (CaseSensitivePathsPlugin, sw-plugin-after-resolve) is no longer a waterfall hook, but a bailing hook instead.
Do not return the passed object, but modify it instead.
Returning false will ignore the request and results in no module created.
*Note: I added join function into .paths file
once I clone, I do yarn install
, I remove the console.log
from the main js file and I do yarn build
this is the current outcome:
➜ vue3-boilerplate git:(master) ✗ yarn build
yarn run v1.22.5
$ node service/commands/build.js
assets by status 123 KiB [cached] 5 assets
Entrypoint app = static/js/chunk-vendors.ba5071a5.js static/js/app.530a2040.js
ERROR in ./src/App.vue?vue&type=style&index=0&id=6922b061&lang=scss (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[12].use[0]!./src/App.vue?vue&type=style&index=0&id=6922b061&lang=scss)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
at Object.pitch (/PRIVATE_PATH/vue3-boilerplate/node_modules/mini-css-extract-plugin/dist/loader.js:50:14)
@ ./src/App.vue?vue&type=style&index=0&id=6922b061&lang=scss 1:0-418 1:0-418
@ ./src/App.vue 4:0-63
@ ./src/main.ts 2:0-28 5:10-13
webpack 5.24.4 compiled with 1 error in 17119 ms
ERROR Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.