在vuejs中缺少webpack配置 [英] webpack config missing in vuejs
问题描述
我的vuejs应用程序的package.json看起来像
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"
]
}
}
在构建vue应用程序时，它会生成一个index.html文件看起来像，
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>
运行静态文件无法获取，即。 /js/vendor.be88a6a7.js 返回404，但可以通过调用 /static/js/vendor.be88a6a7.js url。所以我必须在所有静态url路径前加上 / static 。但是我没有在该目录中找到任何webpack.conf文件。
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.
推荐答案
在vue cli 3中，webpack配置文件在运行时动态生成。它被抽象了。这就是你没有看到webpack配置文件的原因。
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.
你可以在这里找到webpack配置文件：
You can find the webpack config file here:
<projectRoot>/node_modules/@vue/cli-service/webpack.config.js
这是动态解析的文件。
output.publiPath 是 / 在webpack配置文件中。如果你想检查想要的是webpack配置文件，你可以在命令行中使用 vue inspact 命令。它打印出一个序列化格式，仅用于检查配置文件。
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 inspact command in your command line. It prints out a serialized format only meant for inspection of the config file.
但如果你想配置webpack配置，你可以使用 vue.config.js file。
But if you want to configure the webpack config you can make use of the vue.config.js file.
如果你没有 vue.config.js 文件，然后在项目的根目录中创建它。
If you do not have vue.config.js file, then create it in root of your project.
然后添加以下内容：
// vue.config.js
module.exports = {
configureWebpack: {
output: {
publicPath: '/static/'
}
}
}
资源：
- Vue-Cli 3 docs
- Configuring Webpack
这篇关于在vuejs中缺少webpack配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
