Vue本地开发环境配置及上线部署

最新推荐文章于 2024-07-13 10:42:11 发布

胖达抡键盘

最新推荐文章于 2024-07-13 10:42:11 发布

阅读量2.7k

点赞数

文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/weixin_52485890/article/details/125908264

版权

本文介绍了Vue项目的本地开发环境配置，通过`npm run serve`启动服务，并讲解了如何解决跨域问题。在正式部署时，需使用`npm run build`生成dist文件夹，然后将其上传至web服务器如tomcat或IIS。当存在后端服务时，可能出现404错误，此时可通过nginx的反向代理配置进行请求转发。

摘要由CSDN通过智能技术生成

开发环境只需要执行【npm run serve】即可启动服务。

如果需要跨域访问，可以通过配置vue.config.js的devServer解决。

该设置在正式环境是无效的。

*
 * Vue-CLI项目的核心配置文件
 */
const webpack = require('webpack')
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

const path = require('path')
const resolve = dir => {
    return path.join(__dirname, dir);
};

module.exports = {
    // vue cli3.3之后废除了baseUrl,在这之后需要使用 publicPath
    publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
    chainWebpack: config => {
        config.plugin('jquery').use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }])
        config.plugin('monaco-editor').use(MonacoWebpackPlugin, [{}])
    },
    devServer: {
        before(app) {
        },
        open: true,
        https: false