亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

這可能看起來有點(diǎn)複雜，答案可能是“不要那樣做，這樣做”，所以我將從我正在做的事情的背景開始?；旧衔矣幸粋€(gè)遺留的 AngularJS 應(yīng)用程序，我們希望將其從 Vue 遷移到 Vue。我們無法選擇端到端重寫應(yīng)用程序，並且需要一點(diǎn)一點(diǎn)地進(jìn)行，同時(shí)仍然提供功能齊全的應(yīng)用程式。

因此，總體目標(biāo)是讓兩個(gè)框架同時(shí)運(yùn)行，我希望我可以對路由做一些事情，或者可能將我的單頁面應(yīng)用程式分成兩個(gè)單獨(dú)的頁面以用於不同的框架。我已經(jīng)將 angularjs 從使用 gulp 建置管道轉(zhuǎn)換為使用 webpack，因?yàn)槲艺J(rèn)為這是讓 Vue 運(yùn)行的邏輯第一步，但現(xiàn)在我遇到了障礙。

我用來建立角度應(yīng)用程式的 webpack.config.js 如下所示：

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',
        })
    ]
};

現(xiàn)在工作正常，我得到了一些東西，添加了像以前一樣工作的結(jié)尾。

然後我新增了一個(gè) /source/vueJs 目錄，並複製並貼上了 vue create hello-world 產(chǎn)生的內(nèi)容 hello world 專案。我的假設(shè)是，如果我可以修改我的webpack.config.js 來建立它，然後我可以進(jìn)一步迭代它以達(dá)到將兩個(gè)工作應(yīng)用程式合併在一起的程度，但我已經(jīng)在努力獲得hello-world vue 專案可以生產(chǎn)任何東西。

到目前為止，我基本上註釋掉了所有相關(guān)的 angularJS 部分，並添加了我認(rèn)為正確的內(nèi)容來構(gòu)建 vue 應(yīng)用程序，所以現(xiàn)在我有了：

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()
    ],
};

這運(yùn)作正常，我得到一個(gè) distribution/ 目錄，其中包含我的資產(chǎn)，但是所提供的網(wǎng)站運(yùn)行起來就像根本沒有運(yùn)行 JavaScript 一樣。比較我的版本上npx webpack 的輸出和hello-world 專案上npx vue-cli-service build 的輸出，javascript 類似，但在很多關(guān)鍵領(lǐng)域有所不同，一開始似乎我的版本確實(shí)如此沒有像hello world 專案那樣嵌入任何HTML。

嘗試從 webpack 編譯 vue 應(yīng)用程式會失敗嗎？你只能使用 vue-cli-service build 來做到這一點(diǎn)，因此僅限於 vue 嗎？我嘗試使用https://cli.vuejs.org/guide/webpack.html 和https://cli.vuejs.org/config/ 中找到的資訊來修改我的vue.config.js，但坦白說，我覺得我出局了我目前的深度，不確定我正在做的事情是否是一個(gè)好主意。

是否有更好的策略可以實(shí)現(xiàn)我的最終目標(biāo)？如果這是一個(gè)可行的解決方案，我需要更改哪些配置才能正確建立 angularjs 和 vue 應(yīng)用程式？