npm run build doesn't work."Opening index.html over file:// won't work."
Solution 1
I finally found the problem: I went to config/index.js and changed the AssetPublicPath
from default path into my own path. And then it worked! But the Tips is still there. I don't think that's a problem anyway.
Solution 2
File: config/index.js Change assetsPublicPath from '/' to './'
Related videos on Youtube
Young
Updated on June 04, 2022Comments
-
Young almost 2 years
I'm trying to use Vue(v2) to build a single page application. Running the command
npm run build
doesn't work; I don't find a static file created in my folder. Although I don't get any error message, I see this in the command line after executingnpm run build
:Build complete. Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.
The content of my
build/build.js
file (which is the script thatnpm run build
executes) is as follows:require('./check-versions')() process.env.NODE_ENV = 'production' var ora = require('ora') var rm = require('rimraf') var path = require('path') var chalk = require('chalk') var webpack = require('webpack') var config = require('../config') var webpackConfig = require('./webpack.prod.conf') var spinner = ora('building for production...') spinner.start() rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { if (err) throw err webpack(webpackConfig, function (err, stats) { spinner.stop() if (err) throw err process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n') if (stats.hasErrors()) { console.log(chalk.red(' Build failed with errors.\n')) process.exit(1) } console.log(chalk.cyan(' Build complete.\n')) console.log(chalk.yellow( ' Tip: built files are meant to be served over an HTTP server.\n' + ' Opening index.html over file:// won\'t work.\n' )) }) })
The content of my webpack.prod.conf.js file:
var path = require('path') var utils = require('./utils') var webpack = require('webpack') var config = require('../config') var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') var CopyWebpackPlugin = require('copy-webpack-plugin') var HtmlWebpackPlugin = require('html-webpack-plugin') var ExtractTextPlugin = require('extract-text-webpack-plugin') var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') var env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : config.build.env var webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': env }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: true }), // extract css into its own file new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css') }), // Compress extracted CSS. We are using this plugin so that possible // duplicated CSS from different components can be deduped. new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } }), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), // keep module.id stable when vender modules does not change new webpack.HashedModuleIdsPlugin(), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] }), // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) ] }) if (config.build.productionGzip) { var CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8 }) ) } if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } module.exports = webpackConfig
What should I do about it?
-
user93 over 6 yearsis index.html located near package.json in the project root?
-
Ankit Kumar over 6 yearsUpdate your question, what you want to build please mention
-
Young over 6 yearsYes, it is. Do you know what's wrong?
-
user93 over 6 yearsjust give lite-server a try npmjs.com/package/lite-server and please tell if it works after installing it globally
-
XåpplI'-I0llwlg'I - over 6 yearsWhat is your
build
script in package.json actually doing? What command is it running? -
Young over 6 years@XåpplI'-I0llwlg'I - I'm sorry I'm a newbie, I don't quite understand your question.
-
user93 over 6 years@Young please update your package.json also in the question
-
XåpplI'-I0llwlg'I - over 6 yearsIn package.json:
"build": "<command>"
<-- what is your<command>
? -
Young over 6 years@user93 I'm sorry it doesn't work.
-
Young over 6 years@XåpplI'-I0llwlg'I- "node build/build.js"
-
user93 over 6 yearsthen what is in build/build.js ??
-
Young over 6 yearsrequire('./check-versions')() process.env.NODE_ENV = 'production' var ora = require('ora') var rm = require('rimraf') var path = require('path') var chalk = require('chalk') var webpack = require('webpack') var config = require('../config') var webpackConfig = require('./webpack.prod.conf') var spinner = ora('building for production...') spinner.start() rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { if (err) throw err webpack(webpackConfig, function (err, stats) { spinner.stop()
-
Young over 6 yearsif (err) throw err process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n') if (stats.hasErrors()) { console.log(chalk.red(' Build failed with errors.\n')) process.exit(1) } console.log(chalk.cyan(' Build complete.\n')) console.log(chalk.yellow( ' Tip: built files are meant to be served over an HTTP server.\n' + ' Opening index.html over file:// won\'t work.\n' )) }) })
-
XåpplI'-I0llwlg'I - over 6 yearsPlease edit your question and add this code to it. It's too hard to read as a comment.
-
XåpplI'-I0llwlg'I - over 6 yearsOkay, it looks like you are using Webpack. Please add the contents of your
webpack.prod.conf
file to your question.
-
-
Mike Axle over 6 yearswhat was your path?
-
Young over 6 years@mikeaxle I’m using my school’s server. So the path was my own folder on the school server.
-
LOG_TAG almost 5 yearsError: Forbidden Your client does not have permission to get URL / from this server. what is this error represents? assetsPublicPath problem?