Vue Alias @

[Rafael Firmino]

How could I solve the vue alias problem.

module.exports = {
	entry: 'src/index.js',
	banner: true,
	output: {
		moduleName: PACKAGE_NAME,
		fileName: (context, defaultFileName) => {
			return `${PACKAGE_NAME}.[format][min].js`;
		},
		format: ["es", "cjs", "umd", "umd-min"]
	},
	babel: {
		minimal: true
	},
	plugins: {
		vue: {
			css: true,
		},
		babel: {
			runtimeHelpers: true,
			configFile: false
		}
	},
	bundleNodeModules: true,
};

This is a output warning
warning unresolved_import: @/components/HelloWorld is treated as external dependency
warning unresolved_import: @core/pages/roles/index/index-page.vue is treated as external depende

[johannes]

I just had the same problem. Hope this helps:

import path from 'path'

const projectRoot = path.resolve(__dirname)

// ...

    alias: {
      resolve: ['.jsx', '.js', '.vue', '.ts'],
      entries: [
        { find: /^@\/(.*)/, replacement: path.resolve(projectRoot, 'src/$1') },
      ],
    },

[Otis Sutton]

Hey @johannes-z where do you put that config?

Cheers.

[johannes]

@CrashyBang in your bili.config.ts file.

[Otis Sutton]

Hey @johannes-z,

Is it a top level config option? (I can't find the documentation for it), currently I have:

import path from "path";

const projectRoot = path.resolve(__dirname);

export default {
  input: "path/to/some/Component.vue";


  output: {
    moduleName: "someComponent",
    format: ["umd"]
  },

  plugins: {
    vue: true
  },

  babel: {
    configFile: false,
  },

  alias: {
    resolve: [".js", ".vue"],
    entries: [
      { find: /^@\/(.*)/, replacement: path.resolve(projectRoot, "src/$1") }
    ]
  },

  bundleNodeModules: true
};

But this is still unable to resolve.

[johannes]

@CrashyBang It should be inside plugins:

import path from "path";

const projectRoot = path.resolve(__dirname);

export default {
  input: "path/to/some/Component.vue";


  output: {
    moduleName: "someComponent",
    format: ["umd"]
  },

  plugins: {
    vue: true,
    alias: {
      resolve: [".js", ".vue"],
      entries: [
        { find: /^@\/(.*)/, replacement: path.resolve(projectRoot, "src/$1") }
      ]
    },
  },

  babel: {
    configFile: false,
  },

  bundleNodeModules: true
};

[Rafael Firmino]

@johannes-z thanks