Changing file path of js and css files in production build

user_1898957 0
Viewed 3183

I need some assistance or at least to be pointed in the right direction. I am attempting to deploy a vuejs app using Vue CLI 3. When I run the build command the files are built into the dist folder, which works fine. There is also a js and css folder inside dist that contain the respective files. In my index.html is created the paths as /css/app.css or /js/app.js. I want the files to just be placed in the dist folder along with index.html and the paths to read simply app.css or app.js. My goal is to remove the /css/.

I am assuming this is accomplished in the vue.config.js by configuring webpack. I can’t seem to figure this out. I understand the baseURL setting but I can figure this part out..any help would be appreciated.

Thanks

vue-cli-3 vue-cli vuejs2 vue.js webpack
1 Answers

it's answered here https://github.com/vuejs/vue-cli/issues/1967

basically config should look like this

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => Object.assign({}, options, {
        name: '[name].[ext]'
      }));
  },
  css: {
    extract: {
      filename: '[name].css',
      chunkFilename: '[name].css',
    },
  },
  configureWebpack: {
    output: {
      filename: '[name].js',
      chunkFilename: '[name].js',
    }
  }
};

user_50169850
Related