![](\"https:\/\/i.yimenyun.net\/2023-03\/22\/11\/09374527350.jpg\")
<\/figure>\n<\/p>\n\u5b9e\u73b0\u3002\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\uff0c\u6211\u4eec\u901a\u5e38\u9700\u8981\u5c06 Vue.js \u5e94\u7528\u6253\u5305\u6210\u4e00\u4e2a\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u7684 app\uff0c\u672c\u6587\u5c06\u8be6\u7ec6\u4ecb\u7ecd Vue.js \u6253\u5305 app \u7684\u539f\u7406\u548c\u6b65\u9aa4\u3002<\/p>\n
\u4e00\u3001\u539f\u7406<\/p>\n
Vue.js \u7684\u6253\u5305 app \u4e3b\u8981\u662f\u901a\u8fc7 webpack \u8fdb\u884c\u5b9e\u73b0\u7684\u3002Webpack \u662f\u4e00\u4e2a\u6a21\u5757\u6253\u5305\u5de5\u5177\uff0c\u5b83\u53ef\u4ee5\u5c06\u5404\u79cd\u7c7b\u578b\u7684\u6587\u4ef6\uff08\u5982 JavaScript\u3001CSS\u3001\u56fe\u7247\u7b49\uff09\u6253\u5305\u6210\u4e00\u4e2a\u6216\u591a\u4e2a JavaScript \u6587\u4ef6\uff0c\u4ee5\u4fbf\u4e8e\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u3002Vue.js \u5e94\u7528\u7684\u6253\u5305\u8fc7\u7a0b\u4e3b\u8981\u5305\u62ec\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\uff1a<\/p>\n
1. \u901a\u8fc7 webpack \u7684\u5165\u53e3\u914d\u7f6e\u6587\u4ef6\uff08\u5982 index.js\uff09\u52a0\u8f7d Vue.js \u5e94\u7528\u7684\u5404\u4e2a\u6a21\u5757\u548c\u7ec4\u4ef6\u3002<\/p>\n
2. \u5bf9\u4e8e\u6bcf\u4e2a\u6a21\u5757\u548c\u7ec4\u4ef6\uff0cwebpack \u4f1a\u5c06\u5176\u8f6c\u6362\u6210\u4e00\u4e2a JavaScript \u51fd\u6570\uff0c\u5e76\u5c06\u5176\u6dfb\u52a0\u5230\u6253\u5305\u540e\u7684\u6587\u4ef6\u4e2d\u3002<\/p>\n
3. \u5728\u6253\u5305\u540e\u7684\u6587\u4ef6\u4e2d\uff0cwebpack \u8fd8\u4f1a\u6dfb\u52a0\u4e00\u4e9b\u8fd0\u884c\u65f6\u4ee3\u7801\uff0c\u7528\u4e8e\u5b9e\u73b0 Vue.js \u5e94\u7528\u7684\u5404\u79cd\u529f\u80fd\uff0c\u5982\u6570\u636e\u7ed1\u5b9a\u3001\u4e8b\u4ef6\u5904\u7406\u7b49\u3002<\/p>\n
4. \u6700\u540e\uff0cwebpack \u4f1a\u5c06\u6253\u5305\u540e\u7684\u6587\u4ef6\u4f18\u5316\u548c\u538b\u7f29\uff0c\u4ee5\u4fbf\u4e8e\u5728\u6d4f\u89c8\u5668\u4e2d\u52a0\u8f7d\u548c\u8fd0\u884c\u3002<\/p>\n
\u4e8c\u3001\u6b65\u9aa4<\/p>\n
\u4e0b\u9762\u662f\u4e00\u4e9b\u5e38\u7528\u7684\u6b65\u9aa4\uff0c\u7528\u4e8e\u5c06 Vue.js \u5e94\u7528\u6253\u5305\u6210\u4e00\u4e2a\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u7684 app\u3002<\/p>\n
1. \u5b89\u88c5 webpack \u548c\u76f8\u5173\u63d2\u4ef6<\/p>\n
\u9996\u5148\uff0c\u9700\u8981\u5b89\u88c5 webpack \u548c\u76f8\u5173\u7684\u63d2\u4ef6\uff0c\u5982 vue-loader\u3001babel-loader \u7b49\u3002\u53ef\u4ee5\u4f7f\u7528 npm \u547d\u4ee4\u8fdb\u884c\u5b89\u88c5\uff1a<\/p>\n
“`<\/p>\n
npm install webpack webpack-cli vue-loader vue-template-compiler babel-loader @babel\/core @babel\/preset-env –save-dev<\/p>\n
“`<\/p>\n
2. \u914d\u7f6e webpack<\/p>\n
\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2a webpack \u914d\u7f6e\u6587\u4ef6\uff08\u5982 webpack.config.js\uff09\uff0c\u5e76\u8fdb\u884c\u5982\u4e0b\u914d\u7f6e\uff1a<\/p>\n
“`<\/p>\n
const path = require(‘path’);<\/p>\n
const { VueLoaderPlugin } = require(‘vue-loader’);<\/p>\n
module.exports = {<\/p>\n
entry: ‘.\/src\/main.js’,<\/p>\n
output: {<\/p>\n
path: path.resolve(__dirname, ‘dist’),<\/p>\n
filename: ‘bundle.js’<\/p>\n
},<\/p>\n
module: {<\/p>\n
rules: [<\/p>\n
{<\/p>\n
test: \/\\.vue$\/,<\/p>\n
loader: ‘vue-loader’<\/p>\n
},<\/p>\n
{<\/p>\n
test: \/\\.js$\/,<\/p>\n
loader: ‘babel-loader’,<\/p>\n
exclude: \/node_modules\/<\/p>\n
}<\/p>\n
]<\/p>\n
},<\/p>\n
plugins: [<\/p>\n
new VueLoaderPlugin()<\/p>\n
]<\/p>\n
};<\/p>\n
“`<\/p>\n
\u5176\u4e2d\uff0centry \u8868\u793a\u5165\u53e3\u6587\u4ef6\uff0coutput \u8868\u793a\u8f93\u51fa\u6587\u4ef6\uff0cmodule.rules \u8868\u793a\u6a21\u5757\u8f6c\u6362\u89c4\u5219\uff0cplugins \u8868\u793a\u63d2\u4ef6\u914d\u7f6e\u3002<\/p>\n
3. \u521b\u5efa Vue.js \u5e94\u7528<\/p>\n