Question

我在使用Laravel作为后端从Vue应用程序中的节点程序包解析静态资产路径时遇到问题。

我有2个项目。

项目A：使用Laravel，Vue和vue-router构建的SPA
项目B：使用webpack捆绑的Javascript ES6游戏（称为Stratego）。

使用npm link将项目B打包为本地npm模块。

这是项目B的文件夹结构：

 - game
     webpack.config.js
   - js
       main.js
   - dist (constructed by webpack)
       package.json
       stratego.js
       - assets
         - images
             image1.svg
   - assets
     - images
         image1.svg

为澄清起见，dist/文件夹是项目A的node_modules中包含的文件夹。

在main.js中，我有以下代码：

import Img1 from '../assets/images/image1.svg';

这是我的webpack.config.js文件缩小了

...
module.exports = {
    entry: './js/main.js',
    context: path.resolve(__dirname),
    output: {
        filename: 'stratego.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'stratego',
        libraryTarget: 'umd'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [
            {
                test: /\.js$/,                              // Compile all .js files with Babel
                exclude: /(node_modules|bower_components)/, // Do not transform npm  and bower packages, add other unwanted sources
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']      // Run all transforms
                    }
                }
            },
            {
                test: /\.svg$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: '[name].[ext]',
                        outputPath: '/assets/images/',
                    }
                },
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new GenerateJsonPlugin(
            "package.json",
            packagePlatformJson,
            undefined,
            2
        )
    ]
};

我想要做的是将项目B嵌入项目A的Vue组件中。当我使用简单的文件服务器尝试此操作时，图像路径是正确的，并从dist/assets/images/img1.svg加载。但是，从项目A启动时，它将解析相对于我当前URL的图像路径。例如。当我在http://localhost:8000/admin时，它会尝试在http://localhost:8000/admin/assets/images/img1.svg处查找图像。

我读过某个地方，应该更改导入以使用绝对路径，例如

import Img1 from '/assets/images/image1.svg';

但是当我尝试这样做时，由于找不到任何图像，我什至无法构建项目。

所以，我的问题是：我该如何解决？将静态文件与节点模块捆绑在一起的正确方法是什么，这样我在解析这些文件时就不会遇到任何问题？也许我不应该将其打包为节点模块，而只是将文件夹放在Vue应用程序文件夹中？

编辑：我的问题基本上与以下问题相同：Include assets from webpack bundled npm package。只是，我的资产相对于我当前所在的URL而不是根目录进行解析。

使用Laravel + Vue中的节点模块包中的静态资产

0 个答案: