Menu
My vuejs app's package.json looks like
package.json
{
"name": "vue_app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.13",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-beta.6",
"@vue/cli-plugin-eslint": "^3.0.0-beta.6",
"@vue/cli-service": "^3.0.0-beta.6",
"@vue/eslint-config-standard": "^3.0.0-beta.6",
"lint-staged": "^6.0.0",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"vue-template-compiler": "^2.5.13"
},
"babel": {
"presets": [
"@vue/app"
]
},
"eslintConfig": {
"root": true,
"extends": [
"plugin:vue/essential",
"@vue/standard"
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
]
}
}
Upon building the vue app, it generates an index.html file while looks like,
dist/index.html
<body>
<noscript><strong>We're sorry but vue_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div
id=app></div>
<script type=text/javascript>
(function(r){var n=window["webpackJsonp"];window["webpackJsonp"]=function(e,u,c){for(var i,f,p,l=0,a=[];l<e.length;l++)f=e[l],t[f]&&a.push(t[f][0]),t[f]=0;for(i in u)Object.prototype.hasOwnProperty.call(u,i)&&(r[i]=u[i]);n&&n(e,u,c);while(a.length)a.shift()();if(c)for(l=0;l<c.length;l++)p=o(o.s=c[l]);return p};var e={},t={2:0};function o(n){if(e[n])return e[n].exports;var t=e[n]={i:n,l:!1,exports:{}};return r[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=r,o.c=e,o.d=function(r,n,e){o.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},o.n=function(r){var n=r&&r.__esModule?function(){return r["default"]}:function(){return r};return o.d(n,"a",n),n},o.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},o.p="/",o.oe=function(r){throw console.error(r),r}})([]);
//# sourceMappingURL=/js/manifest.bb41d6d8.js.map
</script>
<script type=text/javascript src=/js/vendor.be88a6a7.js></script>
<script type=text/javascript src=/js/app.5edcb6c7.js></script>
</body>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<title>Flask + Vue.js Template</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
On running static files are failed to get fetched , ie. /js/vendor.be88a6a7.js returns 404 but it can be fetched by calling /static/js/vendor.be88a6a7.js url. So I have to prepend /static to all the static url paths. But I don't find any webpack.conf file located on that directory.
source code
361
The webpack-simple template has the webpack-config. js file directly in root of your project folder. Looks like you are using webpack template. To make changes to the webpack config goto the build folder.
So go into the package. json file and add these to the scripts object. Now we can go back to our terminal and run npm run start to start up webpack development server, our project should compile successfully else you can go through the steps again or drop a comment, I'll be glad to help you out.
However, you can also create Vue components in *. js files, the template that the component uses is then defined in a different file or given as a simple string. In that case, you do not need Webpack.
Vue CLI is built on top of Webpack and so for beginners, you do not need to know what Webpack is as the Vue CLI has taken care of the configurations with great default presets and you literally need 0 configs to start.
In vue cli 3 the webpack config file is generated dynamically at runtime. It has been abstracted away. That is the reason you don't see a webpack config file.
You can find the webpack config file here:
<projectRoot>/node_modules/@vue/cli-service/webpack.config.js
This is the file that is dynamically resolved.
The output.publiPath is / by default in the webpack config file. If you want to check want is webpack config file looks like you can use vue inspect command in your command line or via vue ui -> click Tasks -> click inspect. It prints out a serialized format only meant for inspection of the config file.
But if you want to configure the webpack config you can make use of the vue.config.js file.
If you do not have vue.config.js file, then create it in root of your project.
Then add the following:
// vue.config.js
module.exports = {
configureWebpack: {
output: {
publicPath: '/static/'
}
}
}
Resources:
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
