Question

我有一个Vue.js应用程序与npm run dev完全匹配，但在执行npm run build并打开index.html时，将没有活动，只有空白页面。

html中的目录是dist/build.js，已正确加载。

这是webpack配置：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
  path: path.resolve(__dirname, 'dist'),
  publicPath: 'dist/',
  filename: 'build.js'
},
module: {
rules: [
  {
    test: /\.css$/,
    use: [
      'vue-style-loader',
      'css-loader'
    ],
  },      {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
      }
      // other vue-loader options go here
    }
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  },
  {
    test: /\.(png|jpg|gif|svg|png)$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
  }
]
},
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  },
  extensions: ['*', '.js', '.vue', '.json']
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: '"production"'
  }
}),
new webpack.optimize.UglifyJsPlugin({
  sourceMap: true,
  compress: {
    warnings: false
  }
}),
new webpack.LoaderOptionsPlugin({
  minimize: true
})
])
}

这些是package.json中的依赖项：

"dependencies": {
"firebase": "^4.10.1",
"vue": "^2.5.11",
"vue-router": "^3.0.1",
"vuefire": "^1.4.5",
"vuex": "^3.0.1"
},
"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.0",
  "babel-preset-stage-3": "^6.24.1",
  "cross-env": "^5.0.5",
  "css-loader": "^0.28.7",
  "file-loader": "^1.1.4",
  "vue-loader": "^13.0.5",
  "vue-template-compiler": "^2.4.4",
  "webpack": "^3.6.0",
  "webpack-dev-server": "^2.9.1"
}

dist文件夹和index.html位于同一目录中。 index.html在日志中没有显示任何内容或错误。

Answer 1

我假设您直接打开index.html文件，例如

file:///home/you/some-project-folder/index.html

webpack-simple模板假设您将通过HTTP服务器在文档根目录（即/）处为您的应用程序提供服务。

您可以在index.html ...

中看到这一点

<script src="/dist/build.js"></script>

请注意/前缀。

您的想法是将index.html和dist文件夹上传到某个托管服务提供商的服务器。

现在，您可以将此路径编辑为dist/build.js并且它可能有效，但资源路径可能会出错，并且由于浏览器对file:/// <加载的资源的限制，任何AJAX请求都可能无效/ p>

Vue-CLI webpack-simple模板 - 如何运行构建

1 个答案: