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

Question

我有一个 Vue.js 应用程序可以在 npm run dev 上运行得很好，但是当执行 npm run build 并打开 index.html 时，不会有 activity，只有一个空白页。

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，它可能会工作，但资产路径可能是错误的，并且任何 AJAX 请求可能无法工作，因为浏览器对通过file:///

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

Vue-CLI webpack-simple template - How to run build

webpack

vue.js

vue-cli

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

Vue-CLI webpack-simple template - How to run build

webpack

vue.js

vue-cli

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