I'm trying to use web with vue-cli project.
My worker is in file user.worker.js. When I run vue-cli-service serve for first time it works, but after restart webpack tries to load user.worker.worker.js and cant because such file doesn't exist. If I rename or move the file it works for first time but after restart fails again.
App.vue
<template>
<div id="app"></div>
</template>
<script>
import Worker from "#/user.worker";
export default {
name: "App",
created() {
const inst = new Worker();
inst.postMessage({
path: `some data`,
});
},
};
</script>
user.worker.js
onmessage = async ({ path }) => {
postMessage({ path });
};
vue.config.js
module.exports = {
chainWebpack: (config) => {
config.module
.rule("worker")
.test(/\.worker\.js$/)
.use("worker-loader")
.loader("worker-loader")
.end();
},
};
package.json
"name": "worker-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"worker-loader": "^3.0.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.0",
"#vue/cli-plugin-eslint": "^4.5.0",
"#vue/cli-service": "^4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Related
I am trying to create some aliases to make my package cleaner but my project is ignoring my vue.config.js file. I am using the Vue CLI with Vue v^2.6.11.
vue.config.js:
const path = require('path')
module.exports = {
configureWebpack: {
resolve: {
alias: {
'#vue-toggle-component': path.resolve(__dirname, 'src/components')
}
}
}
}
package.json:
{
"name": "vue-toggle-component",
"version": "0.1.1",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"node-sass": "^4.14.1",
"sass-loader": "^10.0.4",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"description": "## Project setup ``` yarn install ```",
"main": "babel.config.js",
"repository": "git+https://github.com/nehlis/vue-toggle-component.git",
"keywords": [
"Vue.js",
"Toggle",
"Component",
"Lightweight",
"Checkbox"
],
"author": "Niels Bosman",
"license": "ISC",
"bugs": {
"url": "https://github.com/nehlis/vue-toggle-component/issues"
},
"homepage": "https://github.com/nehlis/vue-toggle-component#readme"
}
When I look online for a solution every page says Vue should read the config file. But it does not, since I tried console logging there and it had no output. Anyone knows more about this?
I hope you can help.
I'm new to WebSockets, I've gotten a simple app running locally and now I wanted to try setting up WS with Vue but am not getting the expected behaviour. I've tried to make code as concise as possible.
I followed this tutorial: https://tutorialedge.net/javascript/vuejs/vuejs-websocket-tutorial/
Goal:
I'm trying to establish a simple WebSockets connection with Vue.
With the code below, I'm running npm run serve(see package.json file), to run my application on http://localhost:8080/.
The problem:
WebSockets connects as I expect it to but when I fire sendMessage with the button, both browsers aren't console logging, which is what I'm expecting.
I've tried changing the WS connection to this.connection = new WebSocket("ws://localhost:8080") but no luck, it never connects and remains in the connecting phase.
I'm receiving no errors in the console.
Can you please help me figure out what I'm doing wrong?
Your help is much appreciated.
Thank you
Moe
The code below is my root Vue.appfile.
<template>
<div id="app">
<button v-on:click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
name: 'App',
components: {
testComponent
},
data: function () {
return {
connection: null
}
},
methods: {
sendMessage: function (message) {
this.connection.send(message)
}
},
created: function () {
console.log("Starting Connection to WebSockets Server.")
this.connection = new WebSocket("wss://echo.websocket.org")
this.connection.onopen = function (event) {
console.log(event)
console.log("Successfully connected to the WebSocket Server.")
}
this.connection.onmessage = function (event) {
console.log(event)
}
}
}
</script>
This is my package.json file.
{
"name": "vuejs-websocket-tutorial",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I'm working on a SPA with Vue.js and Django.
I run npm run build to generate the bundle files that will be used in production. I was expecting to only generate two files: dist/bundle.js and dist/bundle.css. However, besides the aforemetnioned files, a third js file is also being generated: dist/js/about.add8abe8.js.
Why is this?
In my Django project, inside the frontend/src/views/ directory I have 3 Vue components: Home.vue, List.vue and About.vue.
EDIT:
I don't have a webpack.config file. But these are some other files that may be relevant:
package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.19",
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.7.0",
"#vue/cli-plugin-eslint": "^3.7.0",
"#vue/cli-service": "^3.7.0",
"#vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21",
"webpack-bundle-tracker": "^0.4.2-beta"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/prettier"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
vue.config:
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
// on Windows you might want to set publicPath: "http://127.0.0.1:8080/"
publicPath: "http://0.0.0.0:8080/",
outputDir: "./dist/",
chainWebpack: config => {
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
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.disableHostCheck(true)
.headers({ "Access-Control-Allow-Origin": ["*"] });
},
// uncomment before executing 'npm run build'
css: {
extract: {
filename: "bundle.css",
chunkFilename: "bundle.css"
}
}
};
I am trying to install vue-test-utils and jest in a project. It is vue-cli project but I did not setup the testing when I ran it initially.
It finds the test but fails on the import statements.
Here is the error.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
It is almost certainly a babel thing (I think) but I cannot work it out.
Here are the config files.
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}
jest.config.js
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest',
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
transformIgnorePatterns: [
'/node_modules/'
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/'
}
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-moment": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.4.3",
"#vue/cli-plugin-babel": "^3.6.0",
"#vue/cli-plugin-eslint": "^3.6.0",
"#vue/cli-service": "^3.6.0",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.7.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"jest": "^24.7.1",
"jest-transform-stub": "^2.0.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.30.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Well, looks like you need global section in your jest config. I'm using vue + ts, so my globals looks like that:
globals: {
'ts-jest': {
babelConfig: true
}
}
Attempting to create a new vue project. I run:
yarn global add #vue/cli
vue create my-project
Then:
cd my-project
yarn serve
Right out of the gate I'm getting an error that I cannot resolve:
Cannot find module '#babel/preset-env/data/built-ins.json
In the auto-generated package.json (below) #babel/preset-env isn't listed as a dev dependency, but I assume it gets added automatically as a dependency of some of the vue stuff? Any idea what is going on?
Here are auto-generated files:
package.json
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.6.6"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.5.0",
"#vue/cli-plugin-eslint": "^3.5.0",
"#vue/cli-service": "^3.5.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}