這可能看起來有點令人費解，答案可能是“不要那樣做，那樣做”所以我將從我正在做的背景開始。基本上，我有一個遺留的 AngularJS 應用程式，我們希望從 Vue 遷移到 Vue。我們沒有端到端重寫應用程式的選項，需要在交付功能應用程式的同時逐步完成。
因此，總體目標是讓兩個框架同時運行，我希望我可以對路由做一些事情，或者可能將我的單頁應用程式拆分為 2 個單獨的頁面，用于不同的框架。我已經將 angularjs 從使用 gulp 構建管道轉換為使用 webpack，因為我認為這是讓 Vue 運行的合乎邏輯的第一步，但現在我遇到了障礙。
我webpack.config.js構建 Angular 應用程式的作業如下所示：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
target: 'web',
// mode: "development",
// devtool: "source-map",
module: {
rules: [
{
test: /\.html$/,
loader: "html-loader",
},
{
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
"sass-loader",
],
},
{
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
exposes: ["$", "jQuery"],
},
}
],
},
entry: {
vendor: "./source/vendor.js",
main: "./source/index.js",
},
optimization: {
minimize: false
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'distribution'),
clean:true
},
plugins: [
new HtmlWebpackPlugin({
template: 'source/index.html',
})
]
};
這現在作業正常，我得到了一些東西，添加了像以前一樣作業的結尾。
然后我添加了一個/source/vueJs目錄，并復制并粘貼了由vue create hello-world. 我的假設是，如果我可以修改我webpack.config.js的來構建它，然后我可以進一步迭代它以達到將兩個作業應用程式合并在一起的地步，但我已經在努力讓 hello-world vue 專案產生任何東西.
到目前為止，我基本上注釋掉了所有相關的 angularJS 部分，并添加了我認為正確的內容來構建 vue 應用程式，所以現在我有了這個：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
target: 'web',
mode: "development",
devtool: "source-map",
module: {
rules: [
// {
// test: /\.html$/,
// loader: "html-loader",
// },
// {
// test: /\.s[ac]ss$/i,
// use: [
// "style-loader",
// "css-loader",
// "sass-loader",
// ],
// },
// {
// test: require.resolve("jquery"),
// loader: "expose-loader",
// options: {
// exposes: ["$", "jQuery"],
// },
// },
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
// this will apply to both plain `.js` files
// AND `<script>` blocks in `.vue` files
{
test: /\.js$/,
loader: 'babel-loader'
},
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
],
},
entry: {
// vendor: "./source/vendor.js",
// angular: "./source/index.js",
vue: "./source/vueJs/index.js"
},
optimization: {
minimize: false
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'distribution'),
clean:true
},
plugins: [
new HtmlWebpackPlugin({
//template: 'source/index.html',
}),
new VueLoaderPlugin()
],
};
這運行良好，我得到了一個distribution/包含我的資產的目錄，但是所服務的站點運行起來就好像根本沒有運行 javascript。比較npx webpack我的版本的輸出和npx vue-cli-service buildhello-world 專案的輸出，javascript 是相似的，但在很多關鍵領域有所不同，一開始我的版本似乎沒有嵌入任何 HTML，如你好世界專案確實如此。
嘗試從 webpack 編譯 vue 應用程式是失敗的原因嗎？您只能使用vue-cli-service build并因此僅限于 vue 嗎？我嘗試使用https://cli.vuejs.org/guide/webpack.html和https://cli.vuejs.org/config/上的資訊修改我的 vue.config.js ，但坦率地說，我覺得我出局了在這一點上我的深度和不確定我正在做的事情是否是一個好主意。
有沒有更好的策略來實作我的最終目標？如果這是一個可行的解決方案，我需要更改我的配置以使 angularjs 和 vue 應用程式都能正確構建？
uj5u.com熱心網友回復：
我沒有只見樹木不見森林。問題不在于webpack.config.js它不能成功地生成一個作業的 angular & vue 組合應用程式，問題是我沒有提供一個實際使用這些東西的模板，所以它只是用提供的腳本生成一個空白index.html但是正文中沒有內容。
改變
new HtmlWebpackPlugin({
//template: 'source/index.html',
}),
在我的問題中，有一個同時使用 AnularJS 組件和 Vue 組件的模板可以正常作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/523392.html