Skip to main content
se añadieron 193 caracteres en el cuerpo
Origen Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

Intentos

Basado en el reporte en github primero intenté actualziar mis dependencias, y no funcionó.

Intentos

Basado en el reporte en github primero intenté actualziar mis dependencias, y no funcionó.

Origen Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

¿Cómo configuro mi build a producción para un proyecto vue con Typescript?

Al tratar de hacer el build con npm me da el siguiente error en consola:

vue-cli-service build

/ Building for production...

ERROR Failed to compile with 1 errors
11:01:12 AM

This relative module was not found:

  • ./src/main.js in multi ./src/main.js

ERROR Build failed with errors.

Obviamente .src/main.js no existe pero sí .src/main.ts

Mi archivo de configuración de webpack (webpack.config.js):

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('vue-html-webpack-plugin')

module.exports = {

  entry: {
    app: path.resolve(__dirname, 'src/main.ts')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
    publicPath: '/'
  },
  resolve: {
    alias: [{
      alias: '@',
      name: path.resolve(__dirname, 'src')
    }, {
      alias: 'vue$',
      name: 'vue/dist/vue.esm.js'
    }
    ],
    extensions: ['*', '.js', '.vue', '.json', '.ts']
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader']
      },
      {
        test: /\.txt/,
        use: 'raw-loader'
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      // Añadimos este loader para que TypeScript funcione dentro de nuestro componente .vue
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: { appendTsSuffixTo: [/\.vue$/] },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // enable CSS Modules
              modules: true
              // customize generated class names
              // localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      },
      {
        test: /\.s[ca]ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          // 'sass-loader'
          {
            loader: 'sass-loader',
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                fiber: require('fibers'),
                // customize generated class names
                indentedSyntax: false // optional
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      vue: true,
      inject: true,
      filename: 'index.html',
      template: path.join(__dirname, 'public/index.html')
    })
  ]
}

¿Qué archivo de configuración debería de modificar y cómo?